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

问题描述

我正在使用 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(),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(),//     ],//   },}

解决方法

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