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

Question

我正在使用 webpack 的CssMinimizerWebpackPlugin ( docs )。 我最初按照文档中的建议对其进行了配置

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

Webpack 默认包含webpack-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(),
        ],
      },
}