開發(fā)過程中，經(jīng)常會有不同的生產(chǎn)環(huán)境配置的參數(shù)都是不一樣的翎猛，使用webpack配置不同的參數(shù)環(huán)境
- 在config 目錄下新建 文件
/*
* @param
* DEV_PORT 默認dev開發(fā)端口
* WEB_PATH_ASSETS 打包路徑
* BASE_URL 接口前綴
*/
function getCodeEnv() {
const args = process.argv
var res
for (var i = 0; i < args.length; i++) {
if (args[i].indexOf('--env.CODE_ENV=') !== -1) {
res = args[i].split('=')[1] || ''
break
}
}
return res || 'production'
}
const CODE_ENV = `"${getCodeEnv()}"`
const { DEV_PORT, WEB_PATH_ASSETS, BASE_URL } = (() => {
const def = {
DEV_PORT: '80',
WEB_PATH_ASSETS: '"/dist/"',
BASE_URL: '""'
}
switch (CODE_ENV) {
case '"development"':
def.DEV_PORT = '3000'
def.WEB_PATH_ASSETS = '"/store-pass-portals/dist/"'
def.BASE_URL = '"/store-pass-portals"'
break
case '"test"':
def.DEV_PORT = '3000'
def.WEB_PATH_ASSETS = '"/store-pass-portals/dist/"'
def.BASE_URL = '"/store-pass-portals"'
break
case '"preproduction"':
def.DEV_PORT = '3000'
def.WEB_PATH_ASSETS = '"/dist/"'
def.BASE_URL = '""'
break
case '"production"':
default:
}
return def
})()
module.exports = {
CODE_ENV,
DEV_PORT,
WEB_PATH_ASSETS,
BASE_URL
}
- 修改dev.env.js 文件 添加 code.env.js
var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
const codeEnv = require('./code.env') //
module.exports = merge(
prodEnv,
{
NODE_ENV: '"development"'
},
codeEnv
)
- 修改 config/index.js 文件 根據(jù)打包需要傳遞對應(yīng)的參數(shù)
//這里只是代碼片段 相應(yīng)需要修改的
var path = require('path')
const codeEnv = require('./code.env')
module.exports = {
build: {
assetsPublicPath: JSON.parse(codeEnv.WEB_PATH_ASSETS), //對應(yīng)的打包路徑
....
},
dev:{
port: JSON.parse(codeEnv.DEV_PORT), //這里的端口don
}
- 修改prod.env.js
const merge = require('webpack-merge')
const codeEnv = require('./code.env')
module.exports = merge(
{
NODE_ENV: '"production"'
},
codeEnv
)
- index.html 如果需要手動引入靜態(tài)資源路徑
<link rel="icon" href="<%= process.env.WEB_PATH_ASSETS %>static/favorite.ico">
- package.json scripts修改
"dev": "node build/dev-server.js --env.CODE_ENV=development",
"dev_test": "node build/dev-server.js --env.CODE_ENV=test",
"dev_preprod": "node build/dev-server.js --env.CODE_ENV=preproduction",
"dev_prod": "node build/dev-server.js --env.CODE_ENV=production",
"build": "node build/build.js --env.CODE_ENV=production",
"build_test": "node build/build.js --env.CODE_ENV=test",
"build_preprod": "node build/build.js --env.CODE_ENV=preproduction",
