webpack打包時自動去除console.log——terser/terser-webpack-plugin

terser

由於老牌工具uglify不支持es6，且uglify-es不再更新，我們選擇terser作為js代碼壓縮工具。

# 全局安裝terser命令行工具
npm install -g terser
# 使用terser
terser ./foo.js -c pure_funcs=[console.log],toplevel=true -m -o bar.js
# -c即compress表示普通的壓縮代碼
# pure_funcs表示刪除代碼中的console.log方法
# toplevel為true表示只在頂級作用域壓縮清理變量
# -m即mangle會壓縮變量名等等
# -o代表輸出路徑

其他配置可以參考terser官網

terser-webpack-plugin

這是terser的webpack插件版。由於vue-cli工具中已經用到了terser-webpack-plugin，因此在vue-cli新建的項目中可以直接引入terser-webpack-plugin，無需安裝。

根據vue-cli3文檔，所有對webpack的個性化配置都要寫在vue.config.js中，示例如下：

const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
  configureWebpack: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            pure_funcs: ["console.log"]
          }
        }
      })
    ]
  }
}

轉自：https://wonderlust91.github.io/javascript%E4%BD%BF%E7%94%A8terser%E6%89%93%E5%8C%85%E6%97%B6%E8%87%AA%E5%8A%A8%E5%8E%BB%E9%99%A4console-log/