Webpack使用UglifyJS插件进行优化导致运行时错误

Question

我有一个使用webpack打包的同构React应用程序。

我有两个入口点对应于两个打包文件输出：vendors.js和app.js。

当运行webpack-dev-server或没有任何优化标志编译时，一切正常。但是，一旦我尝试使用Uglify插件，编译输出中就会出现错误。

我已经尝试过：

webpack -p
webpack -optimize-minimize

或在配置文件中：

new webpack.optimize.UglifyJsPlugin({sourceMap:false})

但是所有的结果都导致相同的运行时错误（未定义的变量）。

有什么明显的原因可能导致这种情况吗？Uglify是否过于热衷并删除了不应该删除的内容？

- duncanhall

---

嘿，你能解释一下 webpack -p 和使用 UglifyJsPlugin 插件的区别吗？ - Matthew

Answer 1

问题是由Uglify压缩器的变量混淆引起的。由于不知道哪个变量重命名导致了问题，解决方法是完全关闭混淆:

new webpack.optimize.UglifyJsPlugin({
  sourceMap: false,
  mangle: false
})

你需要将此代码作为Webpack插件添加到配置文件中，例如：

var config = {

  //... various config settings

  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: false,
      mangle: false
    })
  ]
};

- duncanhall

---

我正在点赞这个回答，但如果我们能够将其作为您使用的webpack JSON配置文件的一部分来查看，那就更好了。我不确定在我的配置文件中应该放置它以使其运行。 - user9903

谢谢，我已经添加了一个在配置文件中包含该插件的示例。 - duncanhall

我有同样的问题，但是关闭混淆似乎没有帮助。 - Vladislav Rastrusny

关闭混淆器将失去使用代码压缩的意义，这并不是一个真正的解决方案。 - Ozymandias

正如@AjaxLeung所说，关闭混淆会使Uglify变得毫无意义。您是否尝试过仅关闭某些对象的混淆，例如exports？请参阅Uglify文档：https://github.com/webpack-contrib/uglifyjs-webpack-plugin#mangling - Design by Adrian

Answer 2

对于那些已禁用混淆但仍然存在问题的人，请检查是否使用了-p参数进行构建。似乎-p也会混淆输出，在我的情况下，我不得不将UflifyJsPlugin混淆设置为false，并在没有-p标志的情况下进行构建，以使其正常工作（代价是js的重量增加约50%）。

- mbegoc

Answer 3

我通过以下方式解决了这个问题（我使用的是Webpack 4.5）：

var config = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          safari10: true,
          mangle: {
            safari10: true,
          }
        }
      })
    ]
  }
};

来自https://github.com/mishoo/UglifyJS2/tree/harmony#mangle-options：

safari10（默认为false）--设置为true以解决Safari 10循环迭代器错误“Cannot declare a let variable twice”。另请参阅：safari10输出选项。

还要注意，这应该放在optimization.minimizer中。当我把它放在plugins中时，它对我没有起作用。

- TurplePurtle