我正在尝试console.logs使用 Webpack 的 Uglify 插件删除，但与 Webpack 捆绑在一起的 Uglify 插件似乎没有该选项，文档中没有提到。
我正在像这样从 webpack 初始化 uglify：
new webpack.optimize.UglifyJsPlugin()
我的理解是我可以使用独立的 Uglify lib 来获取所有选项，但我不知道是哪一个？
问题是这drop_console不起作用。
使用 Webpack 和 Uglify 删除 console.logs
IT技术
reactjs
webpack
babeljs
uglifyjs
2021-04-20 03:13:26
6个回答
随着UglifyJsPlugin我们可以处理意见，警告，控制台日志，但它不会是一个好主意，删除所有这些发展模式。首先检查您是否正在运行webpackfor prod env or dev env，如果是，prod env则可以删除所有这些，如下所示：
var debug = process.env.NODE_ENV !== "production";
plugins: !debug ? [
new webpack.optimize.UglifyJsPlugin({
// Eliminate comments
comments: false,
// Compression specific options
compress: {
// remove warnings
warnings: false,
// Drop console statements
drop_console: true
},
})
]
: []
参考：https : //github.com/mishoo/UglifyJS2#compressor-options
2019 年更新 需要在 webpack v4 https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions 中使用 terser 插件来支持 ES6
webpack.config.js
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
sourceMap: true, // Must be set to true if using source-maps in production
terserOptions: {
compress: {
drop_console: true,
},
},
}),
],
},
};
尝试drop_console：
plugins: [
new Webpack.optimize.UglifyJsPlugin({
compress: {
drop_console: true,
}
}
]
更新：对于 webpack v4，它发生了一些变化：
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
...
optimization: {
minimizer: [
new UglifyJSPlugin({
uglifyOptions: {
compress: {
drop_console: true,
}
}
})
]
}
我个人认为控制台日志（尤其是console.error）对产品非常有用，并认为保留它们是个好主意。如果您真的想删除特定的控制台功能，例如console.log您应该使用pure_funcs选项 egpure_funcs: ['console.log']并且这将删除，console.log因为纯函数不会产生副作用，那么 Uglify 可以丢弃未分配给任何东西的那些。
optimization: {
minimizer: [
new UglifyJSPlugin({
uglifyOptions: {
compress: {
// Drop only console.logs but leave others
pure_funcs: ['console.log'],
},
mangle: {
// Note: I'm not certain this is needed.
reserved: ['console.log']
}
}
})
]
}
对于 TerserJS（不推荐使用 Uglify 并且不支持新的 JS 特性，你不应该使用它）
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true
}
}
})
]
}
正如所讨论的，您也可以pure_funcs交替使用。
这是 Webpack v4 的新语法：
optimization: {
minimizer: [
new UglifyJSPlugin({
uglifyOptions: {
compress: {
drop_console: true
},
output: {
comments: false
}
},
}),
],
},
您可以使用terser-webpack-plugin 压缩选项pure_funcs参数来有选择地删除控制台功能并保留您想要的功能，例如 console.error。
我正在使用“webpack”：“^4.39.3”和“terser-webpack-plugin”：“^2.3.2”。
步骤：
1. npm install terser-webpack-plugin --save-dev
2. 修改您的 webpack.config 设置TerserPlugin为优化选项的最小化器。
const TerserPlugin = require('terser-webpack-plugin');
module.exports = (env) => {
return [{
entry: '...',
mode: 'production',
output: {...},
plugins: [...],
optimization: {
'minimize': true,
minimizer: [new TerserPlugin({
terserOptions: {
compress: {
pure_funcs: [
'console.log',
'console.info',
'console.debug',
'console.warn'
]
}
}
})],
},
module: {...}
}];
};
对于 uglifyjs-webpack-plugin，将选项包装在 uglifyOptions 对象中：
plugins: [
new UglifyJSPlugin({
uglifyOptions: {
compress: {
drop_console: true
}
}
})
]