前言
说起console.log调试，不必多说，那是十分的好用，开发中帮忙咱们解决了不少Bug。咱们常常能在开发环境中看见这一坨一坨的console调试。然而生产环境是绝不对不容许呈现console信息代码的。你还在手动一个一个删除吗，那得多累啊！
上面咱们来看一下这几种形式革除生产环境console无用代码。
基本操作
Webpack配置
uglifyjs-webpack-plugin
咱们能够看一下该插件介绍，该插件是用于缩小咱们代码js代码体积。并且如果装置运行该插件的话，node版本是在v6.9.0+和Webpack版本v4.0.0+。
官网地址看这里：uglifyjs-webpack-plugin
装置
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 } } }) ] } }配置完下面代码，重启即可看到成果。留神：代码只会在production（生产环境）环境下无效，看下面咱们的配置mode: production，就是生产环境。来解说一下下面这俩个属性drop_console和pure_funcs的区别，前者则是删除所有带console的前缀的调试办法，如：console.log、console.table、console.dir只有带有console前缀则全副删除。而后者则是配置，就是数组的值是什么它才会删除什么，比方pure_funcs：[console.log, console.dir]那么只会删除这两项，则不会删除代码中的console.table代码。
以上代码放到生产环境下，console调试代码即可革除，然而还有一个问题须要留神，就是该插件只反对ES5语法，如果你的代码中波及到ES6语法则会报错。
terser-webpack-plugin
该插件跟下面uglifyjs-webpack-plugin一样，都是用于缩小咱们代码js代码体积。
看下面形容：如果你的Webpack版本大于5+，则不须要装置此terser-webpack-plugin插件，会自带terser-webpack-plugin。但你的Webpack版本还是4，则你须要装置terser-webpack-plugin4的版本
装置
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 } } }); ] }}该插件性能与下面一样，属性用法也一样，惟一该插件可反对ES6语法。都是在生产环境代码失效。
Vue-cli配置
这是在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\(.*?\)手写Loader删除console
咱们来写一个简易版的革除console插件。
新建一个js文件，我这里名为clearConsole.js，其实这里也是用正则去匹配而后替换为空。如果不懂loader则可看我这篇文章手写一个Sass-loader。
clearConsole.js
const reg = /(console.log\()(.*)(\))/g;module.exports = function(source) { source = source.replace(reg, "") return source;}在Vue.config.js配置
module.exports = { // 省略... configureWebpack: { module: { rules: [ { test: /\.vue$/, exclude: /node_modules/, loader: path.resolve(__dirname, "./clearConsole.js") }, { test: /\.js$/, exclude: /node_modules/, loader: path.resolve(__dirname, "./clearConsole.js") } ], } },}配置如上代码就能够啦~，革除js文件和vue文件里的console.log。exclude代表不去node_module目录下查找。
谢谢观看，有帮忙能够关注一下公众号：前端娱乐圈
感激
谢谢你读完本篇文章，心愿对你能有所帮忙，如有问题欢送各位斧正。
我是蛙人(✿◡‿◡)，如果感觉写得能够的话，请点个赞吧❤。
感兴趣的小伙伴能够退出 前端娱乐圈交换群 欢送大家一起来交换探讨
写作不易，「点赞」+「在看」+「转发」 谢谢反对❤