解決webpack-dev-server代理常切換問題

背景

一般咱們有一份webpack.dev.config.js使用webpack-dev-server的proxy，代理到開發服務器，來解決本地跨域問題。假如項目變大，可能須要proxy到不一樣環境，好比docker，或者後端開發人員的電腦上

現有問題

• 須要手動更改proxy配置，比較麻煩還容易寫錯
• 改變後的config文件會被git檢測到
• 不當心將本地修改的配置push到遠程倉庫，對其餘人形成困擾

需求

假如本地開發服務器是dev.xxx.cn，docker環境是docker.xxx.cn，服務端開發人員ip是192.168.1.1

由於我本地用了gulp，啓動前端開發環境到命令是gulp local(與npm run xx的效果差很少)，那麼我但願

• 當gulp local的時候，proxy 爲 dev.xxx.cn
• 當gulp local -t docker的時候，proxy 爲 docker.xxx.cn
• 當gulp local -t 192.168.1.1的時候，proxy 爲 192.168.1.1

解決方案

建立webpack.local.js，proxy配置以下

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

在咱們運行gulp local時，讀取local.config文件，替換{target|dev}爲-t後的內容，好比gulp local -t docker，替換後變爲'http://docker.xxx.cn'

再將替換後的文件內容輸出到一個名爲webpack.local.target.js的文件裏，而後執行webpack-dev-server -c webpack.local.target.js

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

實現細節

上面的配置中{target|dev}|後面的dev是執行gulp local時的默認選項

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判斷內容爲-t後的參數是否爲ip，若是是，替換'http://{target|dev}.xxx.cn'爲http://192.168.1.1
第二個判斷是否有參數，若是有，替換爲http://docker.xxx.cn
第三個判斷就是直接運行gulp local不加-t時，替換爲http://dev.xxx.cn

正則不太懂能夠看我另外一篇文章 《正則速記法》
以爲運行開發環境打包慢能夠看《webpack性能榨汁機》