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'
}
複製代碼

最後文件目錄以下：

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