vue官方webpack模版多個打包環境搭建

佩子發表於2018-11-28
VueWeb

1.為什麼需要多個打包環境

真實開發中，至少有一個開發環境，一個測試環境，再最後才是生產環境。在官方的模版中只設定了一個打包環境，這樣不同環境的特殊變數就需要我們每次手動更改，手動就意味著失誤，人不是機器，太容易遺漏了，所以我們稍微來改造下官方的構建檔案。

2.目錄結構

我們先來看下原來的目錄

vue官方webpack模版多個打包環境搭建
和打包配置相關的是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'
}
複製程式碼

最後檔案目錄如下：

vue官方webpack模版多個打包環境搭建
至少打包微信公眾號工程很省事啦！`(∩_∩)′

相關文章