javascript - 为什么 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

Since version 4 webpack runs optimizations for you depending on the chosen mode, still all optimizations are available for manual configuration and overrides.
特别是对于 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(),
        ],
      },
}