如何解决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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
canvas绘制的直线动画
Jan 23 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 Javascript
JS实现吸顶特效
Jan 08 Javascript
js实现三角形粒子运动
Sep 22 Javascript
小程序实现密码输入框
Nov 16 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
MySQL修改密码方法总结
2008/03/25 PHP
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
Java中final关键字详解
2015/08/10 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
node.js入门教程
2014/06/01 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
python多线程抓取天涯帖子内容示例
2014/04/03 Python
python遍历数组的方法小结
2015/04/30 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
大学生毕业求职的自我评价
2013/09/29 职场文书
全民健身日活动方案
2014/01/29 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
护士2014年终工作总结
2014/11/11 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫