Webpack config CSSminify create JS file-CodePudding

I'm trying to explore webpack on purpose to minify my JS and SCSS file. On purpose to do that I use CSSMinimizer and TerserPlugin for webback

module.exports = {
    entry: {
        style:'./asset/sass/main.scss',
    },
    output:{
        path:path.resolve(__dirname,'asset/dist'),
    },
    module: {
        rules: [
            {
                test: /.s?css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
            }
        ],
    },
    optimization: {
        minimize: true,
        minimizer: [
            '...',
            new CssMinimizerPlugin(),
            new TerserPlugin()
        ],
    },
    plugins: [new MiniCssExtractPlugin()],
};

The issue is it create a style.css but also a style.js whitch I don't want any idea how to remove those unwanted files ?

CodePudding user response：

Webpack generates a output JS file for each asset defined in the entry.
To remove unexpected JS files use the webpack-remove-empty-scripts plugin.

Install:

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

In config add the plugin:

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

module.exports = {
    entry: {
        style:'./asset/sass/main.scss',
    },
    output:{
        path:path.resolve(__dirname,'asset/dist'),
    },
    module: {
        rules: [
            {
                test: /.s?css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
            }
        ],
    },
    optimization: {
        minimize: true,
        minimizer: [
            '...',
            new CssMinimizerPlugin(),
            new TerserPlugin()
        ],
    },
    plugins: [
        new RemoveEmptyScriptsPlugin(), // <=
        new MiniCssExtractPlugin()
    ],
};