使用 Webpack 和 Uglify 删除 console.logs
Posted
技术标签:
【中文标题】使用 Webpack 和 Uglify 删除 console.logs【英文标题】：Remove console.logs with Webpack & Uglify 【发布时间】：2017-04-23 17:49:24 【问题描述】：我正在尝试使用 Webpack 的 Uglify 插件删除 console.logs，但似乎与 Webpack 捆绑在一起的 Uglify 插件没有该选项，文档中未提及。
我正在像这样从 webpack 初始化 uglify：
new webpack.optimize.UglifyJsPlugin()
我的理解是我可以使用独立的 Uglify lib 来获取所有选项，但我不知道是哪一个？
问题是drop_console 不起作用。
【问题讨论】：
【参考方案1】：使用UglifyJsPlugin，我们可以处理cmets、警告、控制台日志，但在开发模式下删除所有这些并不是一个好主意。首先检查你是否在为prod env or dev env运行webpack，如果是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 中使用 terser 插件来支持 ES6 https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
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: true 但它不会删除控制台日志。首先我虽然 webpacks uglify 插件没有附带这些选项，因为官方 webpack 码头上没有提到它们。但似乎我使用的是正确的 uglify 插件，只是 drop_console 不起作用。这是我的 webpack 配置：pastebin.com/tvymXfZ0 试试这个：hastebin.com/kunokasenu.js 这是我的产品配置，我也有单独的开发配置。 我使用相同的代码，当我使用 webpack -p 构建它时一切正常。 这在 Webpack 4 中不起作用：webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
见：***.com/questions/49101152/…【参考方案2】：
试试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）在 prod 上非常有用，并且认为保留它们是个好主意。如果您真的想删除特定的控制台功能，例如 console.log，您应该使用 pure_funcs 选项，例如pure_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。
【讨论】：
这正是我尝试过的，但它没有做任何事情。我可以看到它使代码变得丑陋，但不会删除控制台日志。 我实际上正试图做相反的事情，不幸的是设置drop_console: false 并没有帮助我。
这在 Webpack 4 中不起作用：webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
见：***.com/questions/49101152/…
我是否同时使用 terser 和 uglify？【参考方案3】：
这是 Webpack v4 的新语法：
optimization:
minimizer: [
new UglifyJSPlugin(
uglifyOptions:
compress:
drop_console: true
,
output:
comments: false
,
),
],
,
【讨论】：
【参考方案4】：您可以使用terser-webpack-plugin compress 选项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: ...
];
;
【讨论】：
【参考方案5】：对于 uglifyjs-webpack-plugin，将选项包装在 uglifyOptions 对象中：
plugins: [
new UglifyJSPlugin(
uglifyOptions:
compress:
drop_console: true
)
]
【讨论】：
【参考方案6】：我已经为带有调试配置的 webpack v4 添加了一个全面的答案
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
var debug = process.env.NODE_ENV !== "production";
.....
optimization:
minimizer: !debug ? [
new UglifyJsPlugin(
// Compression specific options
uglifyOptions:
// Eliminate comments
comments: false,
compress:
// remove warnings
warnings: false,
// Drop console statements
drop_console: true
,
)
]
: []
我在 package.json 中的脚本是这样的：
"webpackDev": "npm run clean && export NODE_ENV=development && npx webpack",
"webpackProd": "npm run clean && export NODE_ENV=production && npx webpack -p"
【讨论】：
【参考方案7】：这就是我从我的代码中删除 alert() 和 console.log() 所做的。 global_defs => 用 console.log 替换警报 然后 drop_console 删除所有 console.logs，现在我的浏览器控制台中没有任何显示
new UglifyJsPlugin(
uglifyOptions:
compress:
global_defs:
"@alert": "console.log",
,
drop_console: true
),
插件版本：
"webpack":3.12.0, "webpack-cli": "^3.0.3", "uglifyjs-webpack-plugin": "^1.2.5",
现在 uglifyjs-webpack-plugin v1.2.6 已经发布，我使用了最新的文档，所以我想最新的插件也不会有任何问题。
【讨论】：
【参考方案8】：webpack 4.x 移除 console.log 解决方案
-
只删除
console.log，但保留其他控制台（推荐✅）
pure_funcs: ['console.log']
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
// webpack.config.js
module.exports =
// ...
optimization:
minimizer: [
new UglifyJSPlugin(
uglifyOptions:
compress:
pure_funcs: [
'console.log',
// 'console.error',
// 'console.warn',
// ...
],
,
// Make sure symbols under `pure_funcs`,
// are also under `mangle.reserved` to avoid mangling.
mangle:
reserved: [
'console.log',
// 'console.error',
// 'console.warn',
// ...
],
,
,
),
],
,
// ...
-
删除所有控制台，包括（console.log、console.error、console.warn、...等）（不推荐??♂️）
drop_console: 真，
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
// webpack.config.js
module.exports =
// ...
optimization:
minimizer: [
new UglifyJSPlugin(
uglifyOptions:
compress:
drop_console: true,
,
,
),
],
,
// ...
所有控制台
Chrome Google，版本 88.0.4324.192（官方构建）(x86_64)
参考
https://github.com/mishoo/UglifyJS#compress-options
【讨论】：
【参考方案9】：使用这个更好并且有效 const UglifyEsPlugin = require('uglify-es-webpack-plugin')
module.exports =
plugins: [
new UglifyEsPlugin(
compress:
drop_console: true
),
]
【讨论】：
以上是关于使用 Webpack 和 Uglify 删除 console.logs的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Webpack 对 Typescript 文件进行 Uglify