如何解决webpack-dev-server代理常切换问题


Posted in Javascript onJanuary 09, 2019

背景

通常我们有一份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性能榨汁机》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
Vue实现图书管理案例
Jan 20 Vue.js
JavaScript学习笔记之数组基本操作示例
Jan 09 #Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 #Javascript
Node.js的进程管理的深入理解
Jan 09 #Javascript
从vue源码看props的用法
Jan 09 #Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 #Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 #Javascript
一个因@click.stop引发的bug的解决
Jan 08 #Javascript
You might like
php5中类的学习
2008/03/28 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
js实现页面转发功能示例代码
2013/08/05 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
Vue组件开发技巧总结
2018/03/04 Javascript
vue实现分页组件
2020/06/16 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
十个Python程序员易犯的错误
2015/12/15 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
营销专业应届生求职信
2013/11/26 职场文书
敬老院标语
2014/06/27 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
2014年度个人总结范文
2015/03/09 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python