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的配置並不複雜，可是親手寫起來仍是會有很多收穫，但願這篇文章能幫到有須要的人。