如何解决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 相关文章推荐
JavaScript入门学习书籍推荐
Jun 12 Javascript
js的逻辑运算符 ||
May 31 Javascript
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
Javascript 闭包引起的IE内存泄露分析
May 23 Javascript
js控制的遮罩层实例介绍
May 29 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
AngularJS入门之动画
Jul 27 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
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
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
orm获取关联表里的属性值
2016/04/17 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
Python中关键字is与==的区别简述
2014/07/31 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
python实现ip地址的包含关系判断
2020/02/07 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
小学生自我评价100字(15篇)
2014/09/18 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
小学运动会前导词
2015/07/20 职场文书
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis