webpack配置中環境變量-process.env. NODE_ENV

背景

　　webpack有一特性就是可以讓使用者靈活的在不同環境(開發環境，生產環境等)進行相應的特性的策略打包，比如: 是否使用反向代理使用接口，針對不同的靜態資源(如圖片等)是直接拷貝還是進行打包編譯等等，這一特性的誕生歸功於Nodejs的環境變量-process.env. NODE_ENV

process.env. NODE_ENV

　　1. 值

　　　　1.1  production：生產階段

　　　　1.2 development/staging： 開發階段

　　2. webpack中的應用

// webpack.config.js
module.exports = {
　　// webpack的mode(模式參數)：不同模式下進行不同的內置優化
　　mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
}

 

　　3. 使用

　　　　3.1 這個變量在具體的應用的時候是需要對當前的環境變量進行設置的，一般情況會在進行執行不同命令的時候去設置

　　　　3.2 由於這個變量針對於不同的系統設置方式不一樣，如設置為開發模式的話，

window系統: set NODE_ENV=development  
   mac系統: export NODE_ENV=development

　　　　3.3 鑒於兼容性和使用上的問題，就有人開發了cross-env

　　　　　　　3.3.1 這是一個跨平台的第三方的包，使用的時候需要安裝下，npm i --save-dev cross-env

　　　　　　　3.3.2 設置環境變量: cross-env NODE_ENV=development即可

// package.json
{
　　"scripts": {
　　　　// 設置為開發環境並且按照webpack.dev.js的配置進行打包部署
　　　　"dev": "cross-env NODE_ENV=development webpack --config webpack.config.js"
　　 }
}

      上述只是講解了一個大概的思路和對應的小例子，請大家根據自己具體的項目進行特殊配置。

 

        如有不嚴謹和錯誤地方請希望指正，祝大家工作順利 ！