webpack 分环境打包

由于项目每次打包都要更改接口地址文件，现根据不同环境需要请求不同环境的接口，现主要分为开发调试（develop）、测试（sit）、生产（pro）三种
1、安装cross-env
通过cd命令进入到项目目录下，在终端输入

npm install --save-dev cross-env

2、安装完后，在config目录下，新建文件develop.env.js、sit.env.js、pro.env.js
其中develop.env.js，配置如下

'use strict'
module.exports = {
 NODE_ENV: '"develop"',
 ENV_CONFIG:'"develop"'
}

sit.env.js配置

'use strict'
module.exports = {
 NODE_ENV: '"sit"',
 ENV_CONFIG:'"sit"'
}

pro.env.js配置

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG:'"pro"'
}

dev.env.js原文件修改

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ENV_CONFIG:'"develop"',
})

3、修改config/index.js文件
build中添加环境配置

build:{
  //添加
   proEnv: require('./prod.env'),
    sitEnv: require('./sit.env'),
    developEnv:require('./develop.env'),

4、修改webpackage.prod.conf.js中的env

// const env = require('../config/prod.env')
const env = config.build[process.env.env_config+'Env']

5、build/build.js文件
// 修改spinner的定义

// const spinner = ora('building for production...')
var buildType = process.env.npm_lifecycle_event
var spinner = ora('building for  '+buildType+'  ...')

6、项目package.json文件中scripts配置

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build:develop": "cross-env NODE_ENV=production env_config=develop node build/build.js",
    "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
    "build:pro": "cross-env NODE_ENV=production env_config=pro node build/build.js"
  },

7、接口地址文件
由于项目中需要配置多个不同域名的接口路径，创建一个管理接口地址的文件
在src目录下一个目录，在该目录下新建一个api.js

let url，activityUrl,LoginUrl
const TARGET = process.env.ENV_CONFIG;
switch (TARGET){
    case 'develop':{
   //dev环境
    url = 'http://基础url域名'
    activityUrl  = 'http://活动地址域名'
    LoginUrl =  'http://登录地址域名'
        break
    }
  case 'sit':{
  //sit环境
    url = 'http://基础url域名'
    activityUrl  = 'http://活动地址域名'
    LoginUrl =  'http://登录地址域名'
      break
  }
  case 'pro':{
//pro环境
    url = 'http://基础url域名'
    activityUrl  = 'http://活动地址域名'
    LoginUrl =  'http://登录地址域名'
break
}
module.exports = {
    URL: url,
    LOGIN_URL: LoginUrl,
    BASE_URLACTIVITY: activityUrl
}

最后在需要的地方导入该js文件

参考链接： https://my.oschina.net/shuaihong/blog/1938804