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

Question

我有一个通过webpack捆绑的同构React应用程序。

我有2个入口点对应2个捆绑文件输出： vendors.js和app.js

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

我试过了：

webpack -p
webpack -optimize-minimize

或者在配置中：

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

但都会导致相同的运行时错误（未定义的变量）。

有什么明显可能导致这种情况吗？ Uglify是否过度热心并且删除了不应该的东西？

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
    })
  ]
};

Answer 2

对于那些停用了mangle但仍有问题的人，请检查是否使用-p参数构建。 它似乎-p也破坏了输出，在我的情况下，我不得不将UflifyJsPlugin mangle切换为false并且在没有-p标志的情况下构建以使其工作（代价是增加约50的js的重量） ％）

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循环迭代器错误“无法声明两次let变量”。 另请参见：safari10输出选项。

另请注意，这在optimization.minimizer 。 当我把它放在plugins时它对我不起作用。