为什么 CssMinimizerWebpackPlugin 会阻止我的主 js 文件被缩小？

Question

我正在使用 webpack 的CssMinimizerWebpackPlugin（文档）。我最初按照文档上的建议配置它

  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(),
    ],
  },

但这样做似乎main.js也阻止了我的文件被缩小。我决定更改它并将其放在plugins标签下，只需完全删除优化即可，如下所示：

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

通过这种方式，它似乎可以工作，.css 和 .js 文件都被缩小了。我在上面提供的文档中没有找到任何对此的引用，所以我想知道为什么会发生这种情况？为什么在使用记录的设置时它不起作用？

作为参考，请在下面找到我的完整工作webpack 配置文件（请注意，我通过 --mode 标志传递开发或生产模式）：

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

由于版本 4 webpack 根据所选模式为您运行优化，因此所有优化仍然可用于手动配置和覆盖。

特别是，为了js缩小，它使用TerserWebpackPlugin。当优化被覆盖时，webpack 的默认设置不会生效，仅使用提供的设置。在本例中，它仅通过 Css 插件运行。

为了解决这个问题，webpack 提供了使用 保留现有最小化器的可能性'...'，因此它应该如下所示：

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(),
        ],
      },
}

Webpackwebpack-terser-plugin默认包含在内，也是为了缩小.js文件。上面的配置与下面的配置类似：

// 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(),
        ],
      },
}