0

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)

Boyan Mihaylovv
  • 338
  • 2
  • 10

1 Answers1

0

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(),
    ...
  ]
}
biodiscus
  • 365
  • 3
  • 8
  • This does indeed delete the redundant JavaScript file, but it still tries to download it when calling `styles()`, which results in 404 – Boyan Mihaylovv Mar 14 '22 at 10:08
  • Could you create a small repository with a reproducible problem and open a new issue on GitHub `webpack-remove-empty-scripts`? I try to find a solution for your non-standard usage case. The standard way is to import the style in js without using a function. – biodiscus Mar 15 '22 at 13:20