Javascript Webpack 使用 UglifyJS 插件优化导致运行时错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30322921/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack optimize with UglifyJS plugin causes runtime error
提问by duncanhall
I have an isomorphic React application that is bundled via webpack.
我有一个通过 webpack 捆绑的同构 React 应用程序。
I have 2 entry points corresponding to 2 bundled file outputs: vendors.jsand app.js.
我有 2 个入口点对应 2 个捆绑文件输出：vendors.js和app.js.
When running the webpack-dev-serveror when compiling without any optimization flags, everything works fine. However, as soon as I try to use the Uglifyplugin, the compiled output contains errors.
当运行webpack-dev-server或在没有任何优化标志的情况下编译时，一切正常。但是，一旦我尝试使用Uglify插件，编译后的输出就会包含错误。
I have tried:
我试过了：
webpack -p
webpack -optimize-minimize
or in the config:
或在配置中：
new webpack.optimize.UglifyJsPlugin({sourceMap:false})
But all result in the same runtime error (undefined variables).
但都导致相同的运行时错误（未定义的变量）。
Is there anything obvious that could be causing this? Is Uglify being over-zealous and removing something it shouldn't?
有什么明显的原因可能导致这种情况吗？Uglify 是否过于热心并删除了不该删除的内容？
回答by duncanhall
The problem was being caused by the Uglify mangler. Without knowing which variable rename was causing the problem, the solution was to turn off mangling entirely:
问题是由 Uglify mangler 引起的。在不知道哪个变量重命名导致问题的情况下，解决方案是完全关闭 mangling：
new webpack.optimize.UglifyJsPlugin({
sourceMap: false,
mangle: false
})
This should be added as a Webpack Pluginto your config file, eg:
这应该作为Webpack 插件添加到您的配置文件中，例如：
var config = {
//... various config settings
plugins: [
new webpack.optimize.UglifyJsPlugin({
sourceMap: false,
mangle: false
})
]
};
回答by mbegoc
For those who deactivated mangle and still have the issue, check if you build with -p parameter. It appears -p also mangle the output, and in my case, I had to switch UflifyJsPlugin mangle to false and build without the -p flag to get it to work (at the cost of an increase of the weight of the js of around 50%)
对于那些停用 mangle 并且仍然有问题的人，请检查您是否使用 -p 参数进行构建。似乎 -p 也会破坏输出，在我的情况下，我不得不将 UflifyJsPlugin mangle 切换为 false 并在没有 -p 标志的情况下构建以使其工作（代价是增加了 js 的重量约 50 %)
回答by TurplePurtle
I fixed this by using the following (I'm using Webpack 4.5):
我使用以下方法解决了这个问题（我使用的是 Webpack 4.5）：
var config = {
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
safari10: true,
mangle: {
safari10: true,
}
}
})
]
}
};
From https://github.com/mishoo/UglifyJS2/tree/harmony#mangle-options:
来自https://github.com/mishoo/UglifyJS2/tree/harmony#mangle-options：
safari10 (default false) -- Pass true to work around the Safari 10 loop iterator bug "Cannot declare a let variable twice". See also: the safari10 output option.
safari10（默认为 false）——传递 true 以解决 Safari 10 循环迭代器错误“无法两次声明 let 变量”。另请参阅：safari10 输出选项。
Also note that this goes in optimization.minimizer. It didn't work for me when I put it in plugins.
还要注意，这是在optimization.minimizer. 当我把它放进去时它对我不起作用plugins。
