Avoid downloading empty JavaScript file when using MiniCssExtractPlugin and async chunks

Question

When using async chunks with MiniCssExtractPlugin, an empty JavaScript file is created. This file is downloaded together with the extracted CSS file. Is there any way to avoid this, i.e. download only the CSS file?

// index.js
const styles = () => import(/* webpackChunkName: "hello" */ "./hello.less);

// webpack.config.js
return {
  ...
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]
      }
    ]
  }
};

If I call styles() both hello.js and hello.css are downloaded (the latter is injected in head)

Answer 1

To generate the CSS file only, without empty JS file, use the webpack plugin webpack-remove-empty-scripts.

Install the plugin:

npm install webpack-remove-empty-scripts --save-dev

Add to webpack.config.js following:

const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');

return {
  ...
  plugins: [
    new RemoveEmptyScriptsPlugin(),
    ...
  ]
}