vue官方webpack模版多个打包环境搭建

1.为什么需要多个打包环境

真实开发中，至少有一个开发环境，一个测试环境，再最后才是生产环境。在官方的模版中只设置了一个打包环境，这样不同环境的特殊变量就需要我们每次手动更改，手动就意味着失误，人不是机器，太容易遗漏了，所以我们稍微来改造下官方的构建文件。

2.目录结构

我们先来看下原来的目录

和打包配置相关的是build，config文件夹以及package.json文件，我们先看一下package.json

  "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'
}
复制代码

最后文件目录如下：

至少打包微信公众号工程很省事啦！`( ∩_∩)′

转载于:https://juejin.im/post/5bfe40e4e51d4563a33e3700