如何解决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 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
自己开发Dojo的建议框架
Sep 24 Javascript
jquery插件jbox使用iframe关闭问题
Feb 09 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
Dec 03 Javascript
vue项目中实现缓存的最佳方案详解
Jul 11 Javascript
JS内置对象和Math对象知识点详解
Apr 03 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下escape解码函数的实现方法
2010/08/08 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
jquery选择器简述
2015/08/31 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
Python遍历目录中的所有文件的方法
2016/07/08 Python
python 基础教程之Map使用方法
2017/01/17 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
python selenium操作cookie的实现
2020/03/18 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
Pandas的数据过滤实现
2021/01/15 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
Etam德国:内衣精品店
2019/08/25 全球购物
初中科学教学反思
2014/01/21 职场文书
班级文化标语
2014/06/23 职场文书
自我推荐信怎么写
2015/03/24 职场文书
大学生村官工作心得体会
2016/01/23 职场文书