javascript - 添加 OptimizeCssAssetsPlugin 时，Webpack 不会缩小 .js 文件(没有它也能工作)

Question

在生产模式下，我的 webpack 缩小了 .js(正如它应该的那样)。但我还需要缩小我的 .css，为此我必须使用 OptimizeCssAssetsPlugin。当我使用它时，它会缩小我的 .css 但我的 .js 保持未缩小状态。

我的猜测是，当我使用优化(“模块”和“插件”旁边)时，js 会缺少一些东西，因为没有整个“优化” block 它就可以工作。但它是什么？为什么？

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WriteFilePlugin = require("write-file-webpack-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.(sa|sc|c)ss$/,
                exclude: /node_modules/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./demo/index.html",
            filename: "index.html", 
            inject: false
        }),
        new MiniCssExtractPlugin({
            filename: "style.css"
        }),
        new WriteFilePlugin() 
    ],
    optimization: {
        minimizer: [
          new OptimizeCssAssetsPlugin(), 
        ],
      },
};

Answer 1

请查看MiniCssExtractPlugin文档的生产配置:

While webpack 5 is likely to come with a CSS minimizer built-in, with webpack 4 you need to bring your own. To minify the output, use a plugin like optimize-css-assets-webpack-plugin. Setting optimization.minimizer overrides the defaults provided by webpack, so make sure to also specify a JS minimizer...

问候，

const TerserJSPlugin = require('terser-webpack-plugin');

...

optimization: {
    minimizer: [
        // Minify js files:
        // (TerserJS is webpack default minifier but we have to specify it explicitly 
        // as soon as we include more minifiers)
        new TerserJSPlugin({}),
        // Minify css files:
        new OptimizeCSSAssetsPlugin(),
    ],
},