Webpack run production mode 的方法與地雷

先講結論：

webpack -p 這個指令不能與 UglifyJsPlugin 一起使用

根據 webpack 官方文件指出：

Running webpack -p (or equivalently webpack --optimize-minimize --define process.env.NODE_ENV="'production'").

但如果你不想要直接使用 webpack cli 安裝在 global 環境下怎麼辦呢？

沒關係，我們還有 package.json 中的 scripts 可以使用！

{
  "scripts":
    "build": "webpack --config ./webpack.config.js"
}

這麼一來，我們就可以直接使用 project 下安裝的 webpack 執行囉！

$ npm run build

自訂 webpack config

webpack 官方有提供指令的 options 讓使用者不需要 config 也能告訴 webpack 指令你想要加上什麼功能

例如：

定義現在指令跑的版本是 production

$ npm run webpack --define process.env.NODE_ENV="production"

光是一個指令就快要突破天際了，你能想像有多個設定的時候會是什麼樣子嗎…

像這樣的情況，我們可以直接開一個 webpack.config.js 讓 webpack 去讀取設定就可以了！

$ npm run webpack --config ./webpack.config.js

更多 webpack.config.js 設定請看 webpack official document

地雷

這個地雷可能不是這麼多人會踩到，但以新手來說其實很容易搞混設定，就踩到了，但還不知道為什麼（這個人就在說我…XD)

我的設定

package.json 的 scripts 設定：

{
  "scripts":
    "build": "process.env.NODE_ENV="production" webpack -p --config ./webpack.config.js"
}

webpack.config.js 設定：

{
  ...other settings,
  plugins: {
    [
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false,
          drop_console: false
        }
      })
    ]
  }
}

這樣的設定下，跑這個 script 他會【噴 error】 給你！

為什麼呢？

查了一下相關文件與 issue，原來是因為 webpack -p 這個指令下，他原生就會幫你加上 UglifyJsPlugin，但我又在 config 中加上了這個 plugin，導致 Uglify 了兩次，所以就出錯了！

解決方法

由於我們使用了自訂 config 的方法，所以我們會在 config 中判斷現在跑的模式

const env = process.env.NODE_ENV || 'development';

這樣我們就可以很自由的判斷什麼樣的模式需要什麼樣的設定！所決定【捨棄】官方所說的 webpack -p 指令，直接由我們來告訴 webpack 需要什麼樣的 plugin！

所以，我們的 package.json 設定就變成了

{
  "scripts":
    "build": "webpack --config ./webpack.config.js",
    "build:prod": "NODE_ENV=production npm run build"
}

這麼一來，就解決了這個問題囉！