1.为什么需要多个打包环境
真实开发中，至少有一个开发环境，一个测试环境，再最后才是生产环境。在官方的模版中只设置了一个打包环境，这样不同环境的特殊变量就需要我们每次手动更改，手动就意味着失误，人不是机器，太容易遗漏了，所以我们稍微来改造下官方的构建文件。
2.目录结构
我们先来看下原来的目录
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "lint": "eslint --ext .js,.vue src", "build": "node build/build.js" }复制代码 只有一个build命令，然后我们接着看看build/build.js文件
const config = require('../config') const webpackConfig = require('./webpack.prod.conf')复制代码 我们再看看build/webpack.prod.conf文件
const env = require('../config/prod.env') new webpack.DefinePlugin({ 'process.env': env }),复制代码 webpack.DefinePlugin插件允许你创建一个在编译时可以配置的全局常量，也就是在前端工程中可以取到声明的值process.env，可以实现我们手动更改的配置值。 接下来就简单了，我们只需要增加
build/build.dev.js, build/build.uat.js, build/webpack.dev.conf.js, build/webpack.uat.conf.js, config/dev.env.js, config/uat.env.js 就可以了，咦～出现了一个问题，build/webpack.dev.conf.js和config/dev.env.js文件已经存在了，在原来的项目中这个文件是干什么用的呢？ 我们进行一下追踪："dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",复制代码
在npm run dev的时候使用，也就是说这两个文件是启动本地环境的时候用到。这样的话这个命名可能会误导我们，我们将原来的文件改成以下：
build/webpack.local.conf.js,config/local.env.js,复制代码
当然在相应的文件里的引用也应该进行修改。这个时候我们就可以安心的加上dev和uat的打包配置文件了。
3.文件修改
仿照prod文件，我们进行dev环境的增加 package.json新增build:dev命令
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "lint": "eslint --ext .js,.vue src", "build": "node build/build.js", "build:dev": "node build/build.dev.js" }复制代码 config/dev.env.js配置全局变量
'use strict'module.exports = { NODE_ENV: '"production_dev"'}复制代码 build/build.dev.js首先将build/build.js文件内容全部拷贝过来，然后把webpackConfig进行修改
const webpackConfig = require('./webpack.dev.conf')复制代码 build/webpack.dev.conf.js首先把build/webpack.prod.conf.js文件拷贝过来，然后修改
const env = require('../config/dev.env')复制代码 至于其他的，可根据实际情况进行定制化优化，比如在dev环境不需要代码压缩，我们可将uglifyjs-webpack-plugin删除等。uat环境类似。最后在我们的前端工程里就可以出现如下的配置了：
let appIdif (process.env.NODE_ENV === 'development') { // 本地环境配置 appId = ''} else if (process.env.NODE_ENV === 'production_release') { // 生产环境配置 appId = 'release'} else if (process.env.NODE_ENV === 'production_dev') { // 开发环境配置 appId = 'dev'} else if (process.env.NODE_ENV === 'production_uat') { // 测试环境配置 appId = 'uat'}复制代码 最后文件目录如下：