一、webpack中清除console的方法

當然想要清除console我們可以使用babel-loader結合babel-plugin-transform-remove-console插件來實現。

1. 安裝babel-loader和babel-plugin-transform-remove-console插件

npm install babel-loader babel-plugin-transform-remove-console -D

2. 在webpack配置文件中配置loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [['transform-remove-console', {exclude: ['error', 'warn']}]]
          }
        }
      }
    ]
  }
};

其中，babel-plugin-transform-remove-console插件中的exclude選項可以指定保留哪些日志級別的console語句。上面的示例中保留了error和warn級別的console語句，其它級別的將被移除。如果不指定exclude選項，則會移除所有console語句。

二、自定義實現clean-console-loader

上面我們是借助babel插件實現的清除console,那么經過前面章節的鋪墊，我們了解了loader的本質、執行順序、以及分類還有常用的api，我們是否可以自己嘗試寫一個類似功能的loader呢？

下面我們就一起來實現一下吧

其實很簡單就用正則匹配替換一下就行了，哈哈哈

• clean-console.loader

module.exports = function (content) {
  // 清除文件內容中console.log(xxx)
  return content.replace(/console\.log\(.*\);?/g, "");
};

配置使用

• webpack.config.js

  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "./loaders/clean-log-loader",
      },
     ]
   }

這樣就可以啦

• main.js
  
  我們在main.js中寫兩個console

打包看看效果

npm run dev

可以看到控制臺干干凈凈什么都沒有，說明我們自定義的清除console語句的loader生效啦。