【问题标题】：Webpack not minifying .js file when OptimizeCssAssetsPlugin is added (without it it works)添加 OptimizeCssAssetsPlugin 时 Webpack 不会缩小 .js 文件（没有它可以工作）
【发布时间】：2019-08-15 20:11:32
【问题描述】：

在生产模式下，我的 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(), 
        ],
      },
};

【问题讨论】：

请查看 MiniCssExtractPlugin 文档的生产配置：虽然 webpack 5 可能内置了 CSS 最小化器，但 webpack 4 你需要自带。要缩小输出，请使用像 optimize-css-assets-webpack-plugin 这样的插件。设置 optimization.minimizer 会覆盖 webpack 提供的默认值，因此请确保同时指定一个 JS 最小化器...
谢谢@tagkiller！您应该将其作为答案发布，因为它是正确答案。不过，我从没想过要在 MiniCssExtractPlugin 文档中查找它。
感谢您让我知道它对您有帮助，我只是按照您正在寻找的内容给出答案:-)

标签： javascript webpack minify

【解决方案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(),
    ],
},

【讨论】：

【解决方案2】：

首先，安装插件：

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

然后我们需要在 webpack.config.js 的顶部 require 它：

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

Optimization.minimizer”设置：

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

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

您无需自己安装；当你使用“生产”模式时，这是默认使用的插件来缩小你的 JavaScript。

然而，你需要做的是在你的 webpack 配置文件的顶部使用它：

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

【讨论】：