mini-css-extract-optimize-plugin

In webpack 4 with mini-css-extract-plugin, when you use splitchunks to extract css, it will generate empty JS bundle. This empty JS bundle is useless and will cost us one more network connection.

Webpack config maybe like this:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  module: {
    rules: [
      {
        // extract css files in directory `common/styles`
        test: /\/common\/styles\/.*css$/ i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  optimization: {
    splitChunks: {
        cacheGroups: {
            base: {
              name: "base",
              // bundle css files in directory `common/styles` into one single file
              test: /\/common\/styles\/.*(css|scss|sass|less)$/,
              chunks: "all",
              enforce: true
            }
        }
    }
  },
  plugins: [new MiniCssExtractPlugin()],
};

It will generate files like that:

  - base.css
  - base.js

Code in base.js ( It's useless and shouldn't be generated at all !! ):

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["base"],{

  /***/ "./src/common/styles/base.scss":
  /*!*************************************!*\
    !*** ./src/common/styles/base.scss ***!
    \*************************************/
  /*! no static exports found */
  /***/ (function(module, exports, __webpack_require__) {
  // extracted by mini-css-extract-plugin
  /***/ })
}]);
//# sourceMappingURL=base.af983635.js.map

This problem has been fixed in webpack 5. But webpack's maintainer don't want to fix it in webpack 4.

Now you can use this plugin to avoid webpack generating that useless empty chunk.

  const miniCSSExtractOptimizePlugin = require('mini-css-extract-optimize-plugin');

  module.exports = {
    plugins: [new miniCSSExtractOptimizePlugin()]
};

To see more detail, you can refer to this.

License

MIT