webpack 中的 process.env

process.env就是Nodejs提供的一個API，它返回一個包含用戶環境信息的對象。如果我們給Nodejs 設置一個環境變量，並把它掛載在 process.env 返回的對象上，便可以在代碼中進行相應的環境判斷。

 

process.env是Nodejs提供的一個API，那么如果想用process.env.NODE_ENV，就必須先設置其值才能用。
但是如何設置 這個process.env.NODE_ENV環境變量呢？在webpack項目里，我們可以通過設置package.json來實現，但是Windows 系統和Mac系統有區別。

Windows 系統

// package.json
{
  ...
  "scripts": {
    "dev": "set NODE_ENV=development &&  webpack-dev-server --open --hot",
    "build": "set NODE_ENV=production &&   --progress --hide-modules"
  }
}

Mac 系統

// package.json
{
  ...
  "scripts": {
    "dev": "export NODE_ENV=development &&  webpack-dev-server --open --hot",
    "build": "export NODE_ENV=production &&   --progress --hide-modules"
  }
}

但它們的語法都不盡相同。這就帶來兩個問題：
那么問題又來了，我在Windows 開發部署的項目，可能在 Mac 系統無法正常打包，反之亦然。為了解決這個問題，有人就開發了 cross-env。

cross-env是一個跨平台設置環境變量的第三方包，它可以讓你只配置一行命令，就能輕松地在多個平台設置環境變量。首先先安裝

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的值，然后利用這個值來區分當前環境。

來源鏈接：https://www.jianshu.com/p/19d199f93045