手写清除 console 的 loader

前言

作为一个前端，对于 console.log 的调试可谓是相当熟悉，话不多说就是好用！帮助我们解决了很多 bug^_^但是！有因必有果（虽然不知道为什么说这句但是很顺口），如果把 console 发到生产环境也是很头疼的，尤其是如果打印的信息很私密的话，可能要凉凉 TT

删除 console 方式介绍

对于在生产环境必须要清除的 console 语句，如果手动一个个删除，听上去就很辛苦，因此这篇文章本着看到了就要学，学到了就要用的精神我打算介绍一下手写 loader 的方式清除代码中的 console 语句，在此之前也介绍一下其他可以清除 console 语句的方式吧哈哈

1. 方式一：暴力清除

通过编辑器查找所有 console，或者 eslint 编译时的报错提示定位语句，然后清除，就是有点费手，不够优雅因此下面需要介绍几种优雅的清除方式

2. 方式二 ：uglifyjs-webpack-plugin

该插件可用于压缩我们的 js 代码，同时可以通过配置去掉 console 语句，安装后配置在 webpack 的 optimization 下，即可使用，需要注意的是：此配置只在 production 环境下生效

安装npm i uglifyjs-webpack-plugin

其中 drop_console 和 pure_funcs 的区别是：

• drop_console 的配置值为 boolean，也就是说如果为 true，那么代码中所有带 console 前缀的调试方式都会被清除，包括 console.log,console.warn 等

• pure_funcs 的配置值是一个数组，也就是可以配置清除那些带 console 前缀的语句，截图中配的是['console.log'] ,因此生产环境上只会清除 console.log,如果代码中包含其他带 console 的前缀，如 console.warn 则保留

但是需要注意的是，该方法只对 ES5 语法有效，如果你的代码中涉及 ES6 就会报错

3. 方式三：terser-webpack-plugin

webpack v5 开箱即带有最新版本的 terser-webpack-plugin。如果你使用的是 webpack v5 或更高版本，同时希望自定义配置，那么仍需要安装 terser-webpack-plugin。如果使用 webpack v4，则必须安装 terser-webpack-plugin v4 的版本。

安装npm i terser-webpack-plugin@4

terser-webpack-plugin 对于清楚 console 的配置可谓是跟 uglifyjs-webpack-plugin 一点没差，但是他们最大的差别就是 TerserWebpackPlugin 支持 ES6 的语法

4. 方式四：手写 loader 删除 console

终于进入了主题了，朋友们

1. 什么是 loader

众所周知，webpack 只能理解 js，json 等文件，那么除了 js，json 之外的文件就需要通过 loader 去顺利加载，因此 loader 在其中担任的就是翻译工作。loader 可以看作一个 node 模块，实际上就是一个函数，但他不能是一个箭头函数，因为它需要继承 webpack 的 this，可以在 loader 中使用 webpack 的方法。

• 单一原则，一个 loader 只做一件事

• 调用方式，loader 是从右向左调用，遵循链式调用

• 统一原则，输入输出都是字符串或者二进制数据

根据第三点，下面的代码就会报错，因为输出的是数字而不是字符串或二进制数据

module.exports = function(source) {    return 111}

1. 新建清除 console 语句的 loader

首先新建一个 dropConsole.js 文件

// source：表示当前要处理的内容const reg = /(console.log()(.*)())/g;module.exports = function(source) {    // 通过正则表达式将当前处理内容中的console替换为空字符串    source = source.replace(reg, "")    // 再把处理好的内容return出去，坚守输入输出都是字符串的原则，并可达到链式调用的目的供下一个loader处理    return source}

1. 在 webpack 的配置文件中引入

module: {    rules:[        {            test: /.js/,            use: [               {                loader: path.resolve(__dirname, "./dropConsole.js"),                options: {                 name: "前端"                }               }            ]        },      {   ]}

在 webpack 的配置中，loader 的导入需要绝对路径，否则导入失效，前端培训如果想要像第三方 loader 一样引入，就需要配置 resolveLoader 中的 modules 属性，告诉 webpack，当 node_modules 中找不到时，去别的目录下找

module: {    rules:[        {            test: /.js/,            use: [               {                loader: 'dropConsole',                options: {                 name: "前端"                }               }            ]        },      {   ]}resolveLoader:{    modules:["./node_modules","./build"] //此时我的loader写在build目录下},

正常运行后，调试台将不会打印 console 信息

1. 最后介绍几种在 loader 中常用的 webpack api

• this.query:返回 webpack 的参数即 options 的对象

• this.callback:同步模式，可以把自定义处理好的数据传递给 webpack

const reg = /(console.log()(.*)())/g;module.exports = function(source) {    source = source.replace(reg, "");    this.callback(null,source);    // return的作用是让webpack知道loader返回的结果应该在this.callback当中，而不是return中    return     }

• this.async():异步模式，可以大致的认为是 this.callback 的异步版本，因为最终返回的也是 this.callback

const  path = require('path')const util  = require('util')const babel = require('@babel/core')  const transform = util.promisify(babel.transform) module.exports = function(source,map,meta) {  var callback = this.async();   transform(source).then(({code,map})=> {      callback(null, code,map)  }).catch(err=> {      callback(err)  })};