理解webpack中的process.env.NODE_ENV

參考資料

一. process

要理解 process.env.NODE_ENV 就必須要了解 process，process 是 node 的全局變量，並且 process 有 env 這個屬性，但是沒有 NODE_ENV 這個屬性。大家可以創建一個 js （比如index.js）文件，然后打印 process（console.log(process)），在 node 環境下運行 node index.js，就可以看到 process 里面所有的內容（可以看到里面有 env 這個屬性）。

二. process.env.NODE_ENV 的作用

1. 這個變量並不是 process.env 直接就有的，而是通過設置得到的。
2. 這個變量的作用是：我們可以通過判斷這個變量區分開發環境或生產環境。

三. 如何設置 process.env.NODE_ENV

1. 上面是 webpack 官網的原話，當我們設置 mode 為 development 或者 production時，webpack
   會自動的進行一些設置（當然設置了模式以后，webpack會自動的為項目添加一些插件）

   mode: development --> process.env.NODE_ENV = development
   mode: production --> process.env.NODE_ENV = production
   默認情況下 --> process.env.NODE_ENV = production

2. 采用mode的方式完全可以滿足我們的要求，當然webpack3或者以下的同學，就需要通過通過 webpack 自帶的一個插件 DefinePlugin 完成設置工作，采用這種方式設置的時候，值對應的格式必須是"'env'"這種格式，所以會用 JSON.stringify 進行轉換。

   plugins: [
       new webpack.DefinePlugin({
         "process.env.NODE_ENV": JSON.stringify('env')
       }),
     ]
   

3. 如果設置的值不是 development 或者 production，就會出現上面圖中的最后一個方框的情況，不會自動設置mode，它就會在打包或者本地啟動的時候進行提示，叫你設置對應的模式。
   

4. 將 process.env.NODE_ENV 與啟動命令行結合起來
   
   
   當我們這么操作的時候，就相當於將 process.env.NODE_ENV 的值與啟動命令行結合了起來，這里可以看到我們用到了 cross-env ，這是一個能跨平台地設置及使用環境變量的工具，如果沒有它，無法進行 NODE_ENV=hahaha 這樣的操作，當然 cross-env 也必須直接放到它的前面。（通過下面的命令進行安裝）

   npm install cross-env --save-dev
   

5. 這兒有必要說一下，上面通過 JSON.stringify(process.env.NODE_ENV) 進行賦值操作，並不意味着可以在不使用 webpack.DefinePlugin 定義 process.env.NODE_ENV 前直接就可以將它拿來使用，如果我們在沒有使用 webpack.DefinePlugin 的情況下，打印 JSON.stringify(process.env.NODE_ENV)，還是會打印出我們熟悉的默認值 production。
   

6. 所以我們這兒一定要記住，如果沒有直接設置mode，或者通過 webpack.DefinePlugin 定義的 process.env.NODE_ENV，那么 process.env.NODE_ENV 的值就是默認的 production。如果要想scripts 里面的設置起作用，那么就必須通過上面4中的設置進行。