通常情況下炫七，我們需要針對不同環(huán)境（開發(fā)環(huán)境磕蛇、集成環(huán)境音羞、生產環(huán)境等）囱桨，進行相應策略的打包（比如是否替換接口地址，代碼是否壓縮等）嗅绰。webpack就是通過process.env屬性加以區(qū)分舍肠。
webpack是npm生態(tài)中的一個模塊，webpack的運行依賴于node的環(huán)境窘面，沒有node是不能打包的翠语。這里的process.env就是Nodejs提供的一個API，它返回一個包含用戶環(huán)境信息的對象财边。如果我們給Nodejs 設置一個環(huán)境變量肌括，并把它掛載在 process.env 返回的對象上，便可以在代碼中進行相應的環(huán)境判斷酣难。
process.env
process.env屬性返回一個對象谍夭，包含了當前Shell的所有環(huán)境變量黑滴。比如，process.env.HOME返回用戶的主目錄慧库。
通常的做法是跷跪，新建一個環(huán)境變量NODE_ENV，用它確定當前所處的開發(fā)階段齐板，生產階段設為production吵瞻，開發(fā)階段設為development或staging，然后在腳本中讀取process.env.NODE_ENV即可甘磨。
要說明的是橡羞，NODE_ENV 這個名稱只是開發(fā)社區(qū)的一種共識，名稱內容是可以修改的济舆。如果需要卿泽，你也可以把它定義為 NODE_abc或者xxx都行。下邊我們按照約定就以NODE_ENV來說滋觉。
在Webpack配置文件中签夭，經常會看到如下類似的代碼：
// webpack.config.js
module.exports = {
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
}
process.env是Nodejs提供的一個API，那么如果想用process.env.NODE_ENV椎侠，就必須先設置其值才能用第租。
但是如何設置 這個process.env.NODE_ENV環(huán)境變量呢？在webpack項目里我纪，我們可以通過設置package.json來實現慎宾，但是Windows 系統(tǒng)和Mac系統(tǒng)有區(qū)別。
Windows 系統(tǒng)
// package.json
{
...
"scripts": {
"dev": "set NODE_ENV=development && webpack-dev-server --open --hot",
"build": "set NODE_ENV=production && --progress --hide-modules"
}
}
Mac 系統(tǒng)
// package.json
{
...
"scripts": {
"dev": "export NODE_ENV=development && webpack-dev-server --open --hot",
"build": "export NODE_ENV=production && --progress --hide-modules"
}
}
但它們的語法都不盡相同浅悉。這就帶來兩個問題：
那么問題又來了趟据，我在Windows 開發(fā)部署的項目，可能在 Mac 系統(tǒng)無法正常打包术健，反之亦然汹碱。為了解決這個問題，有人就開發(fā)了 cross-env苛坚。
cross-env是一個跨平臺設置環(huán)境變量的第三方包比被，它可以讓你只配置一行命令，就能輕松地在多個平臺設置環(huán)境變量泼舱。首先先安裝
npm install --save-dev cross-env
然后配置package.json就可以了
// package.json
{
...
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --mode=production --progress --hide-modules"
},
}
這樣我們就可以在項目里取到process.env.NODE_ENV的值，然后利用這個值來區(qū)分當前環(huán)境枷莉。
