Webpack 4 - 如何配置最小化？答案

【问题标题】：Webpack 4 - How to configure minimize?Webpack 4 - 如何配置最小化？
【发布时间】：2018-08-09 17:30:04
【问题描述】：

Webpack 4 附带以下声明：

错误：webpack.optimize.UglifyJsPlugin 已被删除，请改用config.optimization.minimize。

很公平，但我找不到任何有关配置在后台运行的 UglifyJsPlugin 实例的信息，例如更改缓存目录。这个可以吗？

【问题讨论】：

作为参考，UglifyJsPlugin 列出了默认值here

标签： javascript webpack webpack-4

【解决方案1】：

无法修改默认配置。

不过，您可以使用optimization.minimizer 设置来实例化您自己的UglifyJsPlugin。使用 4.0，我们使用此示例获取源映射，即使 mode 设置为 'production'（例如，从 4.1.1 开始不再需要）：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      // we specify a custom UglifyJsPlugin here to get source maps in production
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        uglifyOptions: {
          compress: false,
          ecma: 6,
          mangle: true
        },
        sourceMap: true
      })
    ]
  }
};

【讨论】：

Webpack 4 不应该是零配置吗？
这需要我实例化插件，我只是想修改现有配置。
请记住，您可能需要这样做 yarn add uglifyjs-webpack-plugin --dev ;)
这里；在此页面上搜索“optimization.minimizer”：medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a
@AlfonsoPérez webpack 已经安装了 uglifyjs-webpack-plugin 作为依赖项

【解决方案2】：

无需添加uglifyjs-webpack-plugin，您只需将其添加到 webpack.prod.config.js 文件的末尾即可：

 optimization: {
   minimize: false
 }

【讨论】：

这能回答问题吗？ OP 在询问如何配置插件，而不是禁用它？
@Mr5o1 stackoverflow 是一个公共社区，OP 并不是唯一查看答案的人。谷歌让我来到这里，因为这个问题与我的搜索有关，这个答案是一个完全有效的答案，它帮助我解决了我的担忧。而且我不是唯一一个这样的人。我真的不明白那些类型的 cmets。

【解决方案3】：

你可以试试这个

npm install uglifyjs-webpack-plugin --save-dev

webpack.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [new UglifyJsPlugin()],
  },
};

webpack documentation

【讨论】：

【解决方案4】：

只要运行：

yarn add uglifyjs-webpack-plugin --dev

参考：Alfonso Pérez答案

【讨论】：

【解决方案5】：

对于那些落后于我的人，意识到这个误导性错误与我正确的 webpack 配置无关，但实际上，offline-plugin 已经过时并导致了这个问题。它需要升级。见github问题：https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/234#issuecomment-369134047

【讨论】：

【解决方案6】：

你应该检查p 选项：https://webpack.js.org/guides/production/#cli-alternatives：这个标志告诉 Webpack 为生产环境优化你的构建。您可以将它与新的“生产”mode 一起使用以进行更小的构建。

【讨论】：

谢谢，但我希望修改默认配置。