快捷導(dǎo)航

淺談Webpack下多環(huán)境配置的思路

更新時(shí)間：2018年06月27日 09:57:13 作者：Tidus

這篇文章主要介紹了淺談Webpack下多環(huán)境配置的思路，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

前言

由于前后端分離的前端應(yīng)用脫離了后端的支持，在單獨(dú)開(kāi)發(fā)前端應(yīng)用時(shí)，頁(yè)面調(diào)試時(shí)使用固定的開(kāi)發(fā)環(huán)境地址還好，如果出現(xiàn)在本地開(kāi)發(fā)時(shí)需要調(diào)試不同環(huán)境的遠(yuǎn)端API，或者需要將應(yīng)用部署到不同環(huán)境的服務(wù)器上時(shí)，如果不將這些環(huán)境對(duì)應(yīng)的服務(wù)器地址、環(huán)境專(zhuān)屬變量等單獨(dú)配置，也許每次切換環(huán)境都需要修改大量代碼。網(wǎng)上關(guān)于這部分的資料較少，所以下面將以用vue-cli init命令生成的Vue/Webpack項(xiàng)目作為例子，介紹一下我當(dāng)前正在使用的簡(jiǎn)單的多環(huán)境配置的思路。

1、理想中的多環(huán)境配置

在后端開(kāi)發(fā)中，項(xiàng)目中不同環(huán)境對(duì)應(yīng)的參數(shù)配置在不同的配置文件中。當(dāng)需要打包基于Maven的Java項(xiàng)目時(shí)，通常只需要在打包命令的后面加上-P參數(shù)指定Profile環(huán)境，即可打包出對(duì)應(yīng)環(huán)境的包，同理前端在使用webpack開(kāi)發(fā)或者打包時(shí)如果也能這么做，就會(huì)方便很多。

/* maven常用打包命令 */
mvn clean package -P prod

而在前端項(xiàng)目中，調(diào)試與打包命令vue-cli init已經(jīng)為我們?cè)?code>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"
 }

如果可以將這些命令改造成后端中類(lèi)似的打包命令，就很方便了，例如：

/* 改造后的命令，只是打個(gè)比方，實(shí)際并不一定是這樣 */
"scripts": {
  "start:dev": "npm run dev -P dev",
  "build:test": "node build/build.js -P test"
 }

/* 命令行 */
$ npm run start:dev //本地調(diào)試，開(kāi)發(fā)環(huán)境
$ npm run build:test //打包，測(cè)試環(huán)境

所以首先需要解決的是如何把參數(shù)傳遞到調(diào)試/打包的腳本中。

注意：這里想特別說(shuō)明一下的是，vue-cli腳手架幫我們生成好了整個(gè)項(xiàng)目，而且也有對(duì)應(yīng)webpack.dev.conf.js和webpack.prod.conf.js兩個(gè)分離的webpack配置文件，但由于文件的命名問(wèn)題（dev.conf.js/prod.conf.js），很容易讓人誤以為這兩個(gè)文件就是webpack針對(duì)不同環(huán)境的配置。但實(shí)際上這兩個(gè)文件一個(gè)是用于本地調(diào)試時(shí)的配置文件，另一個(gè)是用于打包部署的配置文件。調(diào)試/打包兩種模式與環(huán)境（dev/test/pre/prod等）是可以相互組合的。理論上來(lái)講這兩個(gè)webpack的配置文件我覺(jué)得應(yīng)該叫webpack.debug.conf.js和webpack.build.conf.js會(huì)更貼切一點(diǎn)。

2、腳本參數(shù)化

在node.js中傳遞參數(shù)到腳本中，有多種方法，例如使用process.argv：

/* hello.js */
console.log('hello ', process.argv[2]);

/* 命令行 */
$ node ./hello.js tidus
//process.argv = ['node', './hello.js', 'tidus']
hello tidus

雖然process.argv很方便，但可配置性不高，所以這里用的是yargs，它是node.js中的一個(gè)組件，可以通過(guò)npm直接安裝。
===>戳我查看yargs的api文檔

$ npm install yargs --dev --save

/* hello.js */
const argv = require('yargs').argv;
console.log('hello ', argv.env);

/* 命令行 */
$ node ./hello.js --env test
hello test

通過(guò)yargs可以方便的獲取指定名稱(chēng)的命令行參數(shù)，接下來(lái)就要看看如何利用這個(gè)參數(shù)實(shí)現(xiàn)多文件配置。

3、引入環(huán)境變量

首先在Webpack的官網(wǎng)中已經(jīng)有過(guò)簡(jiǎn)單介紹如何配置環(huán)境變量的文檔，具體參考Webpack Production。簡(jiǎn)單的來(lái)說(shuō)就是DefinePlugin插件會(huì)將我們?cè)创a中所有出現(xiàn)的指定字符串替換為我們提供的對(duì)象/字符串，不同環(huán)境的配置文件則放在/config目錄下。

/* /build/webpack.dev.conf.js: */
plugins: [
  new webpack.DefinePlugin({
   // 源碼中所有 process.env 都會(huì)被替換為
   // '../config/dev.env'這個(gè)module export出來(lái)的東西
   'process.env': require('../config/dev.env')
  })
]

/* /config/dev.env.js */
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"'
})

顯然我們可以直接用這個(gè)插件為我們的多環(huán)境變量服務(wù)。

我們可以通過(guò)上面?zhèn)魅氲侥_本中的環(huán)境參數(shù)，動(dòng)態(tài)加載不同環(huán)境的配置文件，以達(dá)到切換環(huán)境的目的。動(dòng)態(tài)加載不同配置環(huán)境的代碼：

/* /build/webpack.env.conf.js */
// 定義參數(shù)配置
const argv = require('yargs').argv;

// 獲取環(huán)境變量
const env = argv.e;
process.stdout.write('the env is '+ env +'\n');

// require指定的環(huán)境配置文件
const envConfigFile = "../config/" + env + ".env.js";
process.stdout.write('the env config file is '+ envConfigFile +'\n');

// 將require的配置文件原封不動(dòng)export回出去
module.exports = require(envConfigFile);

接下來(lái)要將動(dòng)態(tài)加載的環(huán)境文件丟到webpack的配置文件中，由于webpack.dev.conf.js和webpack.prod.conf.js都是繼承自webpack.base.conf.js，所以我們直接改寫(xiě)wepack.base.conf.js的插件配置部分，直接添加DefinePlugin插件的配置，并去掉原配置文件該插件的配置：

/* /build/webpack.base.conf.js */

// 引入上面的webpack.env.conf模塊
const envConfig = require('./webpack.env.conf')
module.exports = {
 ...
 ,
 // 配置DefinePlugin插件
 plugins: [
  // http://vuejs.github.io/vue-loader/en/workflow/production.html
  new webpack.DefinePlugin({
   'process.env': envConfig
  })
 ],
 ...
}

然后調(diào)試/打包的命令還是用回默認(rèn)生成的命令，只不過(guò)在命令后面?zhèn)魅氕h(huán)境參數(shù)：

/* /package.json */
"scripts": {
  "start:dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --e dev",
  "start:test": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --e test",
  "start:pre": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --e pre",
  "start:prod": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --e prod",
  "build:dev": "node build/build.js --e dev",
  "build:test": "node build/build.js --e test",
  "build:pre": "node build/build.js --e pre",
  "build:prod": "node build/build.js --e prod",
 }

我們的環(huán)境配置文件中的內(nèi)容可以是這樣的：

/* /config/test.env.js */
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
 NODE_ENV: '"test"',
 API_HOST: '"http://test.xx.com:8080"'
})

然后我們就可以在源碼中使用process.env.NODE_ENV來(lái)獲取我們配置的環(huán)境變量的值，甚至可以單獨(dú)抽離一個(gè)api模塊：

/* /src/api/index.js */
const API_HOST = process.env.API_HOST;

export default {
 api1: `${API_HOST}/path/to/api1`,
 api2: `${API_HOST}/path/to/api2`
}

最后，在我們的Vue組件中就可以很方便的使用這些環(huán)境配置了：

/* /src/components/HelloWorld.vue */
 import api from '@/api';
 data () {
   return {
    msg: 'Welcome to Your Vue.js App',
    env: process.env.NODE_ENV,
    api1: api.api1,
    api2: api.api2
   }
  }

4、總結(jié)

整個(gè)流程下來(lái)，我們添加了一個(gè)webpack.env.conf.js模塊，稍微小修改了一下vue-cli生成的3個(gè)webpack配置文件，并在config目錄下添加了各個(gè)環(huán)境的配置文件，項(xiàng)目的結(jié)構(gòu)是這樣子的：