这些操作删除console.log代码，你知道吗？我们经常在开发环境中看到这一堆控制台调试。但是生产环境是绝对不允许出现控制台信息代码的。你还在一个一个手动删除吗，多累啊！下面就来看看这些清除生产环境控制台无用代码的方法吧。基本操作webpack配置uglifyjs-webpack-plugin我们可以看看插件的介绍，这个插件是用来减少我们代码js代码的体积的。如果安装并运行该插件，则节点版本为v6.9.0+，Webpack版本为v4.0.0+。官网地址在这里：uglifyjs-webpack-plugininstallnpmiuglifyjs-webpack-plugin在webpack.config.js文件下使用如下配置。constUglifyJsPlugin=require('uglifyjs-webpack-plugin')module.exports={//省略...mode:"production",optimization:{minimizer:[newUglifyJsPlugin({uglifyOptions:{//删除注释输出:{comments:false},compress:{drop_console:true,//deletealldebuggerswithconsoledrop_debugger:true,pure_funcs:['console.log']//deleteconsole.log}}})]}}配置以上代码后，重启看看效果。注意：代码只会在production（生产环境）环境下有效。看我们上面的配置方式：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的版本Installnpmiterser-webpack-plugin@4useconstTerserWebpackPlugin=require("terser-webpack-plugin");module.exports={//省略...mode:"production",optimization:{minimizer:[newTerserWebpackPlugin({terserOptions:{compress:{warnings:true,drop_console:true,drop_debugger:true,pure_funcs:['console.log',"console.table"]//删除控制台}}});]}}插件功能同上，属性用法也一样，只是插件可以支持ES6语法。在生产环境代码中都是有效的。Vue-cli配置这是推荐用于Vue-cli项目的清晰控制台插件。更多介绍见这里babel-plugin-transform-remove-consoleinstallnpmibabel-plugin-transform-remove-console--save-dev配置在项目根目录的babel.config.js文件下。插件不区分生产环境还是开发环境，只要你配置一下就会生效。module.exports={plugins:["transform-remove-console"]}//生产环境配置如下constprodPlugins=[]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删除控制台下面我们写一个简单版的清除控制台插件。新建一个js文件，我这里的名字是clearConsole.js，其实也是用正则表达式匹配然后替换为空。如果你不知道loader，你可以看我的文章，手写一个Sass-loader。clearConsole.jsconstreg=/(console.log\()(.*)(\))/g;module.exports=function(source){source=source.replace(reg,"")returnsource;}在Vue.config.jsconfiguremodule.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目录中搜索。感谢观看，请关注公众号：前端娱乐圈，感谢阅读，如果觉得有帮助请点击关注，收藏，如果觉得有帮助可以关注前端-端娱乐圈公众号，我每天都会给大家推送一个小知识大家也可以加我微信加我好友，可以和我聊天或者拉你进技术交流群
