1.terser-webpack-plugin 外掛的配置

a、首先安裝開發依賴terser-webpack-plugin

b、之後增加vue.config.js檔案，並寫入程式碼

// 打包去掉console
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  // 打包後預設使用相對路徑，否則會出現首頁空白的情況
  publicPath: './',
  // 關閉原始碼對映，當為false時，打包後的檔案在瀏覽器原始碼目錄將不再顯示webpack://相關的原始碼
  // 不設定此選項，相當於把程式碼給別人白嫖
 

  productionSourceMap: false,
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 為生產環境修改配置
      config.mode = 'production'
      // 將每個依賴包打包成單獨的js檔案
      const optimization = {
        // 啟用最小化壓縮
        minimize: true,
        minimizer: [new TerserPlugin({
          
 
// 和productionSourceMap一樣
          // sourceMap: false,
          terserOptions: {
            compress: {
              // 移除所有console相關的程式碼，比如console.log,console.error
              drop_console: true,
              // 關閉自動斷點功能，vue程式碼裡插入debugger指令後，執行到對應位置會自動斷線，此選項是移除debugger指令
              drop_debugger: true
 
,
              // pure_funcs陣列是用來配置移除指定的指令，比如console.log  alert等等
              // 移除console.log，需要配合.eslintrc.js檔案裡的如下設定，不然打包會出警告
              // rules: {
              //   'no-console':  'off',
              // }
              pure_funcs: ['console.log', 'console.error']
            }
          }
        })]
      }
      // 將optimization的所有屬性合併到config裡
      Object.assign(config, {
        optimization
      })
    } else {
      // 為開發環境修改配置
      config.mode = 'development'
    }
  }
}