vue/cli3 通过自定义loader控制console日志输出

前言

在web项目开发过程中，为了方便调试，我们经常会在控制台通过console.log输出很多日志,然而通常在项目上线的时候，我们都需要把它屏蔽掉。正好通过webpack配置，可以帮我们实现这个功能。

1.编写 ignore-console-log-loader.js

我们在node_modules同级文件夹下新建一个loaders文件夹，这里面存放项目中所有自定义的loader文件。ignore-console-log-loader.js的内容十分简单，即将console.log替换成空字符串

//ignore-console-log-loader.js
const reg = /console\.log\(.*\)/g;
module.exports = function (srcCode) {
    return srcCode.replace(reg, '');
}

2.配置 vue.config.js

这里做了两件事，首先通过configureWebpack中resolveLoader对象的modules属性，配置自定义loader的解析规则,即下面的./loaders/;

 // 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
 // 如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
  configureWebpack: {
   resolveLoader: {
      modules: ['node_modules', './loaders/']
    }
   }

然后通过chainWebpack函数中暴露的config对象，将自定义loader添加到config.module中，我们通过config.when()方法，添加对环境变量的判断，该方法接受两个参数，第一个参数是boolean类型，第二个参数是回调方法，该方法仅在第一个参数为true时触发

 // chainWebpack是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
  chainWebpack(config) {
    // 自定义loader清除console
    config.when(
      process.env.NODE_ENV === 'production', config =>
      config.module.
        rule('js')
        .test(/\.js$/)
        .use('ignore-console-log-loader')
        .loader('ignore-console-log-loader')
        .end()
    )

3.结语

自定义loader的配置并不复杂，但是亲手写起来还是会有不少收获，希望这篇文章能帮到有需要的人。