'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