Why is CssMinimizerWebpackPlugin preventing my main js file from being minified?

Question

I am using webpack's CssMinimizerWebpackPlugin (docs). I initially configured it as recommended on the documentation

  optimization: {
    minimize: true,
    minimizer: [
      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
      // `...`,
      new CssMinimizerPlugin(),
    ],
  },

But it seems that doing so prevents my main.js file from being minified too. I decided to change it and place it under the plugins tag, simply removing the optimization one completely like this:

    plugins: [
        //other plugins
        new MiniCssExtractPlugin(),
    ],

And this way it seems to work, both the .css and .js files are being minified. I didn't find any reference to this under the docs provided above, so I would like to know, why is this happening? Why is it not working when using the documented set up?

For reference, please find my full working webpack configuration file below (note that I am passing the development or production mode through the --mode flag):

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
    entry: path.join(__dirname, 'src/main.js'),
    module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            esModule: false,
                        },
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            // 0 => no loaders (default);
                            // 1 => postcss-loader;
                            // 2 => postcss-loader, sass-loader
                            importLoaders: 1
                        }
                    },
                    'postcss-loader'
                ]
            },
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'public/index.html')
        }),
        new MiniCssExtractPlugin(),
        new CssMinimizerPlugin(),
    ],
    devServer: {
        watchContentBase: true,
        open: true,
        writeToDisk: true,
    },
    // COMMENTED SINCE IT IS NOT WORKING CORRECTLY
    // optimization: {
    //     minimize: true,
    //     minimizer: [
    //       // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
    //       // `...`,
    //       new CssMinimizerPlugin(),
    //     ],
    //   },
}

Answer 1

Since version 4 webpack runs optimizations for you depending on the chosen mode, still all optimizations are available for manual configuration and overrides.

In particular, for js minification it uses TerserWebpackPlugin. When the optimization is overridden then the defaults of webpack do not take effect, using only the provided ones. In this case it only ran through the Css plugin.

To fix this, webpack offers the possibility of keeping existing minimizers by using '...', so it should look like this:

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
    // other config
    optimization: {
        minimizer: [
          // For webpack@5 you can use the `...` syntax to extend existing minimizers
          '...',
          new CssMinimizerPlugin(),
        ],
      },
}

Webpack includes webpack-terser-plugin by default in order to minify the .js files too. The configuration above would be similar to the following one:

// This serves just as an example, webpack provides more optimization steps when using '...'
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
    // other config
    optimization: {
        minimizer: [
          // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
          new TerserPlugin(),
          new CssMinimizerPlugin(),
        ],
      },
}