webpack使用cross-env不同環境配置
一.項目背景
在配置webpack構建項目工程環境時,需要配置能夠隨時切換開發環境或生產環境,還有測試環境的打包命令,使用
cross-env可以很輕鬆的解決問題
二.使用
1.cross-env的作用
cross-env的作用是不需要全局配置NODE_ENV,在scripts腳本中修改NODE_ENV的值從而實現不同環境中proccess.env.NODE_ENV的不同，而config的工作原理就是基於NODE_ENV這個值的，所以推薦兩者結合使用。
2.安裝
$ npm install --save-dev cross-env
3.嵌入命令使用
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
在執行命令前面嵌入cross-env的命令 NODE_ENV在全局可以使用,後面跟 環境的參數
4.獲取全局變量
//webpack.config.js
//獲取全局環境變量(根據package.json裏的cross-env配置取值)
const NODE_ENV = process.env.NODE_ENV;
根據NODE_ENV 可以區分相應的環境,然後做邏輯判斷,處理開發環境和生產環境不同的打包命令!