基於webpack 2.x 的多環境打包配置
在我們實際的項目開發中,可能有多個部署環境,測試環境,預發環境,正式環境。每個環境的請求URL都不同,每次打包時手動更換很麻煩,此時就需要配置多環境打包。
- 安裝cross-env
Run scripts that set and use environment variables across platforms
跨平臺設置和使用環境變量的運行腳本
npm install cross-env --save
Or
yarn add cross-env --save
- 修改package.json
build 通過cross-env 設置了不同的變量 env_config ,在node環境下運行build.js
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"test": "npm run unit",
"build:test": "cross-env env_config=test node build/build.js",
"build:pre": "cross-env env_config=pre node build/build.js",
"build:prod": "cross-env env_config=prod node build/build.js"
},
3.修改build.js
// 刪除這一句
// process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
//這裏是修改,讀取設置的變量
const spinner = ora('building for ' + process.env.env_config)
spinner.start()
4.在config文件夾下新建pre.env.js。test.env.js 和 prod.env.js 同理,設置不同的BaseURL
'use strict'
const merge = require('webpack-merge')
const devEnv = require('./dev.env')
module.exports = merge(devEnv, {
NODE_ENV: '"pre"',
BASE_URL:'"http://pre.xxx.com/api/"'
})
5.修改webpack.prod.config.js
刪除這一段
// const env = process.env.NODE_ENV === 'testing'
// ? require('../config/test.env')
// : require('../config/prod.env')
//根據執行的不同的命令去加載不同的文件
const env = process.env.NODE_ENV = require(`../config/${process.env.env_config}.env`)
//中間部分代碼省略
new webpack.DefinePlugin({
'process.env': env
}),
沒錯,就是這麼簡單,我們去測試一下,假如使用axios發送http請求
axios.defaults.baseURL = process.env.BASE_URL;
去測試一下baseURL是否設置成功吧。歡迎給我留言。