在使用webpack對(duì)項(xiàng)目進(jìn)行打包構(gòu)建的時(shí)候一般都會(huì)區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境，這樣做的好處不言而喻，我們可以在不同的環(huán)境做一些不同的配置，例如生產(chǎn)環(huán)境為了減輕代碼體積會(huì)做一些壓縮之類的優(yōu)化；而開發(fā)環(huán)境為了方便我們開發(fā)調(diào)試，需要做一些代碼檢查，模塊熱更新之類的配置。因此，針對(duì)這兩類環(huán)境我們也有一些固定的配置項(xiàng)。怎樣在執(zhí)行時(shí)根據(jù)環(huán)境的不同讀取這些配置項(xiàng)并把他們加入到環(huán)境變量中去呢？如果直接在代碼中寫肯定不是一個(gè)好方法。這里就引出來今天我們要講的第一個(gè)包: dotenv，可以幫助我們將環(huán)境之外的配置獨(dú)立于代碼之外。
dotenv
使用dotenv時(shí)，我們可以先將環(huán)境的配置寫在單獨(dú)的.env文件中，如下圖所示：
使用的時(shí)候：
然后讓我們來執(zhí)行這個(gè)文件，得到的結(jié)果：
可以看出，我們之前在.env文件中設(shè)置一些配置項(xiàng)已經(jīng)被注入到process.env中，可以方便我們隨時(shí)讀取。
webpack.DefinePlugin
這時(shí)，我們雖然把于環(huán)境相關(guān)的配置項(xiàng)放入process.env中去了，但是，我們的瀏覽器環(huán)境不是node，無法讀取process.env中的變量，如果我們?cè)诖a中也想根據(jù)不同的環(huán)境做一些不同的操作怎么辦呢？不用擔(dān)心，webpack早就給我們提供了definePlugin這個(gè)內(nèi)置插件，可以幫助我們定義全局變量。
plugins:[
new Webpack.DefineWebpackPlugin({'process.env': ...})
]
這樣，我們就可以在代碼中直接調(diào)用process.env中變量啦
cross-env
在設(shè)置環(huán)境變量時(shí)，window機(jī)器上可能不支持NODE_ENV=XXX的方式。cross-env這個(gè)包就是幫助解決這個(gè)問題的，它能夠提供一個(gè)設(shè)置環(huán)境變量的scripts，讓你能夠以u(píng)nix方式統(tǒng)一設(shè)置環(huán)境變量。
{
"scripts": {
"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
}
}
