深入淺出webpack學習 18 區分環境

在開發網頁的時候，一般都會有多套執行環境，例如：

在開發過程中方便開發除錯的環境。

發布到線上給使用者使用的執行環境。

這兩套不同的環境雖然都是由同一套**編譯而來，但是**內容卻不一樣，差異包括：

線上**經過壓縮處理

開發用的**包含一些用於提示開發者的提示日誌，這些日誌普通使用者不可能去看它

開發用的**所連線的後端資料介面位址也可能和線上環境不同，因為避免開發過程中造成對線上資料的影響。

為了盡可能的復用**，在構建的過程中需要根據目標**要執行的環境而輸出不同的**。我們需要一套機制在原始碼中去區分環境。幸運的是webpack已經為我們實現了。

具體區分方法比較簡單，在原始碼中通過如下方式：

if(process.env.node_env === "production") else

其大概原理是借助於環境變數的值去判斷執行哪個分支。

當你的****現了使用process模組的語句時， webpack就自動打包進process模組的**以支援非nodejs的執行環境。當你的**中沒有使用proces時就不會打包進process模組的**。這個注入process模組作用就是為了模擬nodejs中的process，以支援上面使用的

process.env.node_env === 'production'

在構建線上環境**時，需要給當前執行環境設定環境設定環境變數node_env == 'prodeuction'，webpack的配置如下：

const defineplugin = require("webpack/lib/defineplugin")
module.exports = })]
}

注意在定義環境變數的時候使用的是json.stringify包裹字串的原因是環境變數的值需要時乙個由雙引號包裹的字串，而json.stringify('production')的值正好等於'"production"'.

執行構建後，你會在輸出的檔案中發現如下**：

if(true) else

定義的環境變數的值被代入到原始碼中，process.env.node_env === 'production'被直接替換成true。並且由於此時訪問process的語句被替換了而沒有了，webpack也不會打包進process模組了。

defineplugin定義的環境變數只對webpack需要處理的**有效，而不會影響nodejs執行時的環境變數的值。

通過shell指令碼的方式去定義的環境變數，例如node_env=production webpack

，webpack是不認識的，對webpack需要處理的**中的環境區分語句時沒有作用的。

也就是說只需要通過defineplugin定義環境變數就能使上面介紹的環境區分語句正常工作，沒必要又通過shell指令碼的方式去定義一遍。

如果你想讓webpack通過shell指令碼的方式去定義的環境變數，你可以使用environmentplugin，**如下：

new webpack.environmentplugin(['node_env'])

這句**實際上等於：

new webpack.defineplugin()

其實以上輸出的**還可以進一步優化，因為if(true)語句永遠只會執行前乙個分支的**，也就說最佳的輸出應該直接是：

webpack沒有實現去除死**的功能，但是uglifyj可以做這個事情。

除了在自己寫的原始碼中可以有環境區分的**外，很多第三方庫也做了環境區分的優化。以react為例，它做了兩套環境區分：

開發環境：包含型別檢查， html元素檢查等等針對開發者的警告日誌**；

線上環境：去掉所有針對開發者的**，只保留讓react能正常執行的部分，以優化大小和效能。

例如react中有大量類似下面這樣的**：

if(process.env.node_env !== 'production')

如果你不定義node_env=production那麼這些警告日誌就會被包含到輸出的**中，輸出的檔案將會非常大。

process.env.node_env !== 'production'中的node_env和'production'兩個值是社群的約定，通常使用這條判斷語句在區分開發環境和線上環境。