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"
}

這麼一來,就解決了這個問題囉!