如何解决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脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 Javascript
vue绑定class的三种方法
Dec 24 Vue.js
vue动态绑定style样式
Apr 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
PHP 强制下载文件代码
2010/10/24 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
js TextArea的选中区域处理
2010/12/28 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
详解如何较好的使用js
2016/12/16 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
Python标准库与第三方库详解
2014/07/22 Python
跟老齐学Python之Import 模块
2014/10/13 Python
python求列表交集的方法汇总
2014/11/10 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
python和JavaScript哪个容易上手
2020/06/23 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
您的网上新华书店:文轩网
2016/08/24 全球购物
中学劳技课教师的自我评价
2014/02/05 职场文书
主办会计岗位职责
2014/03/13 职场文书
工地安全标语
2014/06/07 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
2014年采购工作总结
2014/11/20 职场文书
vue3不同环境下实现配置代理
2022/05/25 Vue.js