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 appId
if (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'
}
复制代码
最后文件目录如下: