为什么 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 文件都被缩小了。我在上面提供的文档中没有找到对此的任何参考，所以我想知道，为什么会这样？为什么在使用记录的设置时它不起作用？

作为参考，请在下面找到我的完整 working 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(),
        ],
      },
}

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

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

javascript

css

minify

webpack

mini-css-extract-plugin