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 Plugin添加到您的配置文件中，例如：

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时，它对我不起作用。

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

3 个答案: