1. 程式人生 > >解決webpack-dev-server代理常切換問題

解決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效能榨汁機》