webpack使用cross-env不同环境配置

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 可以区分相应的环境,然后做逻辑判断,处理开发环境和生产环境不同的打包命令!