方法一
注意: node版本 v6.9.0+ ; webpack版本 v4.0.0+ 。
代码只会在生产环境(production)下有效。
安装:npm i uglifyjs-webpack-plugin
使用:在webpack.config.js文件下进行如下配置,重启生效
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
// 省略...
mode: "production",
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
// 删除注释
output:{
comments: false
},
compress: {
drop_console: true, // 删除所有调式带有console的
drop_debugger: true,
pure_funcs: ['console.log'] // 删除console.log
}
}
})
]
}
}
方法二
注意:
如果webpack版本大于5+,则不需要安装terser-webpack-plugin插件,会自带。
如果webpack版本还是4,则需要安装此插件4的版本。
该插件与上面一样,属性用法也一样,都是在生产环境生效。不同在于该插件可支持ES6语法。
安装:npm i terser-webpack-plugin@4
使用:
const TerserWebpackPlugin = require("terser-webpack-plugin");
module.exports = {
// 省略...
mode: "production",
optimization: {
minimizer: [
new TerserWebpackPlugin({
terserOptions: {
compress: {
warnings: true,
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log', "console.table"] // 删除console
}
}
});
]
}
}
方法三:
在Vue-cli项目中推荐使用的清除console插件。更多介绍:babel-plugin-transform-remove-console
安装:npm i babel-plugin-transform-remove-console --save-dev
使用:
在项目根目录babel.config.js文件下配置。该插件不区分生产环境或者开发环境,只要你配置都能生效。
module.exports = {
plugins: [
"transform-remove-console"
]
}
// 生产环境如下配置
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
prodPlugins.push('transform-remove-console')
}
module.exports = {
plugins: [
...prodPlugins
]
}
方法四:
直接重写console.log方法
console.log = function () {};
在VSCode编辑器使用
全局搜索项目中的console.log正则匹配,然后全部替换为空
console\.log\(.*?\)