背景

通常我們有一份webpack.dev.config.js使用webpack-dev-server的proxy，代理到開發(fā)服務(wù)器，來解決本地跨域問題。假如項目變大，可能需要proxy到不同環(huán)境，比如docker，或者后端開發(fā)人員的電腦上

現(xiàn)有問題

• 需要手動更改proxy配置，比較麻煩還容易寫錯
• 改變后的config文件會被git檢測到
• 不小心將本地修改的配置push到遠(yuǎn)程倉庫，對其他人造成困擾

需求

假如本地開發(fā)服務(wù)器是dev.xxx.cn，docker環(huán)境是docker.xxx.cn，服務(wù)端開發(fā)人員ip是192.168.1.1

因為我本地用了gulp，啟動前端開發(fā)環(huán)境到命令是 gulp local (與 npm run xx 的效果差不多)，那么我希望

• 當(dāng)gulp local的時候，proxy 為 dev.xxx.cn
• 當(dāng)gulp local -t docker的時候，proxy 為 docker.xxx.cn
• 當(dāng)gulp local -t 192.168.1.1的時候，proxy 為 192.168.1.1
  

解決方案

創(chuàng)建webpack.local.js，proxy配置如下

proxy: {
 '/api/**': {
  target: 'http://{target|dev}.xxx.cn',
  changeOrigin: true,
 },
}

在我們運行 gulp local 時，讀取local.config文件，替換{target|dev}為 -t 后的內(nèi)容，比如 gulp local -t docker ，替換后變?yōu)?'http://docker.xxx.cn'

再將替換后的文件內(nèi)容輸出到一個名為webpack.local.target.js的文件里，然后執(zhí)行 webpack-dev-server -c webpack.local.target.js

最后修改.gitignore文件，加入webpack.loc.target.js，這樣每次生成的文件就不會被誤push到遠(yuǎn)程

實現(xiàn)細(xì)節(jié)

上面的配置中 {target|dev} |后面的dev是執(zhí)行 gulp local 時的默認(rèn)選項

const { t } = gulputil.env
let config = fs.readFileSync(_path.join(__dirname, '/webpack.loc.js')).toString()

if (/\d{1,3}(\.\d{1,3}){3}/.test(t)) {
 config = config.replace(/\\{target[^}]+\\}[^']*/g, t)
} else if (typeof t === 'string' && t.length > 0) {
 config = config.replace(/\\{target[^}]+\\}/g, t)
} else {
 config = config.replace(/\\{target\\|([^}]+)\\}/g, '$1')
}
fs.writeFileSync(_path.join(__dirname, '/webpack.loc.target.js'), config)

第一個if判斷內(nèi)容為-t后的參數(shù)是否為ip，如果是，替換 'http://{target|dev}.xxx.cn' 為 http://192.168.1.1

第二個判斷是否有參數(shù)，如果有，替換為 http://docker.xxx.cn

第三個判斷就是直接運行 gulp local 不加 -t 時，替換為 http://dev.xxx.cn

正則不太懂可以看我另一篇文章《正則速記法》

覺得運行開發(fā)環(huán)境打包慢可以看《webpack性能榨汁機》

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論