添加 OptimizeCssAssetsPlugin 時，Webpack 不會縮小 .js 文件（沒有它就可以工作）

Question

在生產模式下，我的 webpack 會縮小 .js（應該如此）。 但我還需要縮小我的 .css，為此我必須使用 OptimizeCssAssetsPlugin。 當我使用它時，它縮小了我的 .css 但我的 .js 保持未縮小。

我的猜測是，當我使用優化（在“模塊”和“插件”旁邊）時，js 缺少某些東西，因為沒有整個“優化”塊它就可以工作。 但它是什么？ 為什么？

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 文檔的生產配置：

雖然 webpack 5 可能內置了 CSS 最小化器，但在 webpack 4 中你需要自帶。 要縮小輸出，請使用像 optimize-css-assets-webpack-plugin 這樣的插件。 設置 optimization.minimizer 會覆蓋 webpack 提供的默認值，因此請確保同時指定一個 JS 最小化器...

問候，

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

Answer 2

首先，安裝插件：

 npm install optimize-css-assets-webpack-plugin --save-dev

然后我們需要在我們的 webpack.config.js 頂部引入它：

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

Optimization.minimizer”設置：

module.exports = {......
optimization: {minimizer: [new TerserJSPlugin({}),new OptimizeCSSAssetsPlugin({})],}

注意：除了“OptimizeCSSAssetsPlugin”之外，還有一個叫做“TerserJSPlugin”的插件，它是一個webpack自帶的插件。

你不需要自己安裝它； 這是當您使用“生產”模式時默認使用的插件來縮小您的 JavaScript。

但是，您需要做的是在 webpack 配置文件的頂部 require 它：

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