webpack 环境变量配置，实现打包自动切换本地、预发、线上地址

经常会遇到两个系统之间进行对接，A系统采用iframe嵌入B系统页面的情况，联调过程中会发现本地、预发、线上三种环境的地址各不相同，每次换环境手动修改地址很麻烦，采用 cross-env 设置环境变量的方式可以轻松解决：

具体流程：

1. 安装 cross-env

npm install --save-dev cross-env

在node中，有全局变量process表示的是当前的node进程。
process.env包含着关于系统环境的信息，但是process.env中并不存在NODE_ENV这个东西。NODE_ENV 是一个用户自定义的变量，在webpack中它的作用是判断所处环境

2. package.json

// node环境中配置环境变量 cross-env NODE_ENV=production
"build": "cross-env NODE_ENV=production node build/build.js",
"pre": "cross-env NODE_ENV=pre node build/build.js"

3. webpack.prod.conf.js

const env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env') : process.env.NODE_ENV === 'production'
  ? require('../config/prod.env') : require('../config/pre.env')
  
// 在webpack中配置环境变量，用于文件模块
new webpack.DefinePlugin({
  'process.env': env
}),

4. config/pre.env.js

const env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env') : process.env.NODE_ENV === 'production'
  ? require('../config/prod.env') : require('../config/pre.env')
  
// 在webpack中配置环境变量，用于文件模块
new webpack.DefinePlugin({
  'process.env': env
}),

至此，环境变量配置完成，在页面可以根据process.env.NODE_ENV获取当前环境

const DEV_URL = "http://xxxx.100credit.cn/xxxx/";
const PRE_URL = "http://xxxx.100credit.cn/xxxx/";
const PRODUCT_URL = "http://xxxx.100credit.cn/xxxx/";
 
const DEV_TOKEN = 'xxxxx';
const PRE_TOKEN = 'xxxxx';
const PRODUCT_TOKEN = 'xxxxxx';
 
let BASE_URL = ''
let BASE_TOKEN = ''
 
switch (process.env.NODE_ENV) {
  case 'development': {
    BASE_URL = DEV_URL;
    BASE_TOKEN = DEV_TOKEN;
    break;
  }
 
  case 'production': {
    BASE_URL = PRODUCT_URL
    BASE_TOKEN = PRODUCT_TOKEN;
    break;
  }
 
  default:  {
    BASE_URL = PRE_URL;
    BASE_TOKEN = PRE_TOKEN;
    break;
  }
}
 
export {
  BASE_URL,
  BASE_TOKEN
}