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

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

我有2个入口点,分别对应2个捆绑的文件输出:vendors.jsapp.js

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

我试过了:

webpack -p
webpack -optimize-minimize

或在配置中:

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

但是所有这些都会导致相同的运行时错误(未定义的变量)。

有什么明显的原因可能导致这种情况吗?Uglify是否过于热心并删除了不该这么做的东西?

Pro乐2020/03/24 18:24:20

对于停用了mangle并仍然存在问题的用户,请检查是否使用-p参数进行构建。看来-p也使输出混乱,在我的情况下,我不得不将UflifyJsPlugin混乱切换为false并在没有-p标志的情况下进行构建才能使其工作(以增加js权重约50的代价) %)

猴子村村2020/03/24 18:24:20

我通过使用以下命令解决了这个问题(我使用的是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

小胖Gil2020/03/24 18:24:20

该问题是由Uglify流氓造成的。不知道哪个变量重命名会导致问题,解决方案是完全关闭重整:

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

这应该作为Webpack插件添加到您的配置文件中,例如:

var config = {

  //... various config settings

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