'Webpack 5: Empty JS chunks are emitted for CSS entries
module.exports = {
mode: "production",
context: path.resolve(__dirname, "assets/src"),
entry: {
// JAVASCRIPTS
all: ["/one.js", "/two.js"],
// STYLES
style: ["/main.scss"],
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "assets/dist"),
},
optimization: {
minimizer: [new CssMinimizerPlugin(), new TerserPlugin()],
},
plugins: [new MiniCssExtractPlugin({ filename: "[name].css" })],
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader, // 3. Extract css into files
"css-loader", // 2. Turns css into commonjs
"sass-loader", // 1. Turns sass into css
],
},
],
},
};
Output:
all.bundle.js
style.css
style.bundle.js -> empty file
What is the expected behavior?
Since the main.js file is empty, it should be removed when optimization.removeEmptyChunks is true.
Webpack version: 5.66.0
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
