欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2019年01月09日 09:55:47   作者:mugaro  
通常我們有一份webpack.dev.config.js使用webpack-dev-server的proxy,代理到開發(fā)服務器,來解決本地跨域問題。假如項目變大,可能需要proxy到不同環(huán)境,那么如何解決webpack-dev-server代理常切換問題,下面就一起來了解一下

背景

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

現(xiàn)有問題

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

需求

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

因為我本地用了gulp,啟動前端開發(fā)環(huán)境到命令是 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

解決方案

創(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到遠程

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

上面的配置中 {target|dev} |后面的dev是執(zhí)行 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判斷內(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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • 不錯的asp中顯示新聞的功能

    不錯的asp中顯示新聞的功能

    不錯的asp中顯示新聞的功能...
    2006-10-10
  • 微信小程序swiper組件用法實例分析【附源碼下載】

    微信小程序swiper組件用法實例分析【附源碼下載】

    這篇文章主要介紹了微信小程序swiper組件用法,結(jié)合實例形式分析了微信小程序中swiper組件的功能、使用方法,并附帶完整源碼供讀者下載參考,需要的朋友可以參考下
    2017-12-12
  • 子頁向父頁傳值示例

    子頁向父頁傳值示例

    在某些情況下需要子頁向父頁傳值,本文有個不錯的示例,不會的朋友可以參考下
    2013-11-11
  • js序列化和反序列化的使用講解

    js序列化和反序列化的使用講解

    今天小編就為大家分享一篇關于js序列化和反序列化的使用講解,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧
    2019-01-01
  • 定時器(setTimeout/setInterval)調(diào)用帶參函數(shù)失效解決方法

    定時器(setTimeout/setInterval)調(diào)用帶參函數(shù)失效解決方法

    setInterval()方法可按照指定的周期(以毫秒計)來調(diào)用函數(shù)或計算表達式,setTimeout()方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式,詳細使用方法可以參考下本文
    2013-03-03
  • JS中bridge的原理與封裝

    JS中bridge的原理與封裝

    這篇文章主要介紹了JS中bridge的原理與封裝,文章圍繞主題的相關資料展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-06-06
  • 基于JavaScript實現(xiàn)TAB標簽效果

    基于JavaScript實現(xiàn)TAB標簽效果

    js實現(xiàn)tab標簽效果,在項目中經(jīng)常用到,今天抽點時間把我寫的js實現(xiàn)tab標簽效果源碼分享給大家,對js tab標簽代碼需要的朋友參考下
    2016-01-01
  • JavaScript原型和原型鏈詳解

    JavaScript原型和原型鏈詳解

    在面向?qū)ο蟮木幊陶Z言中,類和對象的關系是鑄模和鑄件的關系,對象總是從類創(chuàng)建而來,比如Java中,必須先創(chuàng)建類再基于類實例化對象,這篇文章主要介紹了JavaScript原型和原型鏈的相關知識,需要的朋友可以參考下
    2024-05-05
  • 可以將word轉(zhuǎn)成html的js代碼

    可以將word轉(zhuǎn)成html的js代碼

    這段很短的代碼,可以將word轉(zhuǎn)出html格式的代碼,當然word自己也帶的,另存為里面就有的,喜歡的朋友可以試試。
    2010-04-04
  • 淺談鴻蒙 JavaScript GUI 技術棧

    淺談鴻蒙 JavaScript GUI 技術棧

    眾所周知,剛剛開源的「鴻蒙 2.0」以 JavaScript 作為 IoT 應用開發(fā)的框架語言。作為科普,這篇文章不會拿著放大鏡找出代碼中的槽點來吹毛求疵,而是希望通俗地講清楚它所支持的 GUI 到底是怎么一回事。
    2020-09-09

最新評論