面试回:webpack代理原理

前言

  • 常网IT戳我呀!
  • 常网IT源码上线啦!
  • 本篇录入吊打面试官专栏,希望能祝君拿下Offer一臂之力,各位看官感兴趣可移步🚶。
  • 有人说面试造火箭,进去拧螺丝;其实个人觉得问的问题是项目中涉及的点 || 热门的技术栈都是很好的面试体验,不要是旁门左道冷门的知识,实际上并不会用到的。
  • 请问webpack代理原理?
  • 我相信这是面试Webpack最经常被问到最多的一道题目。

思想觉醒:突破笼子里面的囚禁。

一、webpack

我们可以先简单和面试官拉扯一下:webpack能干什么。

webpack是静态模块打包工具。

webpack 的主要特点包括:

  • 模块化:支持 CommonJS、AMD、ES6 模块等多种模块规范。
  • 资源管理:可以处理 JavaScript、css样式表、图片等各种资源文件。
  • 代码拆分:能够将代码拆分成多个 bundle,实现按需加载。
  • 插件系统:丰富的插件生态系统,可以扩展 webpack 的功能。
  • 热更新:支持热模块替换(Hot Module Replacement),在开发过程中实现实时更新。

二、webpack代理

Webpack 代理的原理是在开发环境中,为了解决前端应用需要请求后端 API 接口的问题,可以通过配置一个代理服务器来转发请求。这样可以避免跨域问题,并且方便开发人员在本地调试前端应用时进行接口调用。

在Webpack中,通常可以使用类似于 devServer.proxy 的配置选项来设置代理。当前端应用发送请求到指定的路径时,代理服务器会将这些请求转发到配置的目标服务器上,并将响应返回给前端应用。

三、http-proxy-middleware

webpack内部是通过http-proxy-middleware 这个库,它是用于创建代理服务器的中间件。

java 复制代码
const proxyMiddleware = require('http-proxy-middleware');

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend-api.com',
        pathRewrite: { '^/api': '' },
        changeOrigin: true,
        secure: false,
      },
    },
  },
};
  • target:指定目标服务器的地址。
  • pathRewrite:可以对请求路径进行重写操作,比如将 "/api" 替换为空字符串 ""。
  • changeOrigin:设置为 true,则请求头中的 origin 字段会被设置为目标服务器地址。
  • secure:设置为 false,则允许代理服务器接受具有无效 SSL 证书的目标服务器。

四、http-proxy-middleware 内部怎么实现了请求的转发

没想到啊,没想到,以为回答了上面的,就下一题了,没想到面试官不依不饶继续追问:http-proxy-middleware 内部怎么实现了请求的转发?

行吧,还好哥是练家子!

其核心机制是使用 Node.js 的 http、https 模块来创建代理服务器,并通过这个代理服务器来转发请求到目标服务器上。

  1. 当代理服务器收到前端应用发送的请求时,http-proxy-middleware 会根据配置的代理规则匹配请求的路径。
  2. 一旦匹配成功,http-proxy-middleware 会创建一个代理请求对象,并设置该请求对象的方法、URL、头部等信息,保留了原始请求的所有信息。
  3. http-proxy-middleware 使用 Node.js 的 http 或 https 模块创建一个新的请求对象,将代理请求对象中的信息应用到这个新的请求对象上。
  4. 接着,http-proxy-middleware 通过创建的 http/https 请求对象,将代理请求发送给目标服务器。
  5. 目标服务器收到代理请求后,处理该请求并返回响应。
  6. http-proxy-middleware 接收到目标服务器返回的响应后,将该响应返回给前端应用。

在实现过程中,http-proxy-middleware 还对请求和响应进行了一些处理,比如支持对请求路径的重写、修改请求头、处理响应头等操作,以满足更复杂的代理需求。

总的来说,http-proxy-middleware 利用 Node.js 提供的 http、https 模块,通过创建代理服务器并处理代理请求的方式,实现了请求的转发功能。

后记

webpack代理原理?

我们再来总结一下回答:

🙋🏻‍♂️我个人主要从三个方面回答

  1. Webpack 代理的原理是在开发环境中,为了解决前端应用需要请求后端 API 接口的问题,可以通过配置一个代理服务器来转发请求。在Webpack中,通常可以使用类似于 "devServer.proxy" 的配置选项来设置代理。当前端应用发送请求到指定的路径时,代理服务器会将这些请求转发到配置的目标服务器上,并将响应返回给前端应用。

  2. 内部用到http-proxy-middleware 这个库,它是用于创建代理服务器的中间件。

  3. 那他内部是怎么实现了请求的转发?其核心机制是使用 Node.js 的 http、https 模块来创建代理服务器,并通过这个代理服务器来转发请求到目标服务器上。

    1. 当代理服务器收到前端应用发送的请求时,http-proxy-middleware 会根据配置的代理规则匹配请求的路径。
    2. 一旦匹配成功,http-proxy-middleware 会创建一个代理请求对象,并设置该请求对象的方法、URL、头部等信息,保留了原始请求的所有信息。
    3. http-proxy-middleware 使用 Node.js 的 http 或 https 模块创建一个新的请求对象,将代理请求对象中的信息应用到这个新的请求对象上。
    4. 接着,http-proxy-middleware 通过创建的 http/https 请求对象,将代理请求发送给目标服务器。
    5. 目标服务器收到代理请求后,处理该请求并返回响应。
    6. http-proxy-middleware 接收到目标服务器返回的响应后,将该响应返回给前端应用。

在实现过程中,http-proxy-middleware 还对请求和响应进行了一些处理,比如支持对请求路径的重写、修改请求头、处理响应头等操作,以满足更复杂的代理需求。

总的来说,http-proxy-middleware 利用 Node.js 提供的 http、https 模块,通过创建代理服务器并处理代理请求的方式,实现了请求的转发功能

层层递进。由浅入深。

如果仔细看下来,其实发现Webpack也不是很难理解,一些羞涩难懂的技术点,只要花点时间去理解,相信很快能攻破,也能明白在实际开发过程中,webpack是怎么代理的,背后的知识点懂了之后,开发过程中也会如翼添虎🐅。

最后,祝君能拿下满意的offer。

我是Dignity_呱,来交个朋友呀,有朋自远方来,不亦乐乎呀!深夜末班车

👍 如果对您有帮助,您的点赞是我前进的润滑剂。

以往推荐

靓仔,说一下keep-alive缓存组件后怎么更新及原理?

面试官问我watch和computed的区别以及选择?

面试官问我new Vue阶段做了什么?

前端仔,快把dist部署到Nginx上

多图详解,一次性啃懂原型链(上万字)

Vue-Cli3搭建组件库

Vue实现动态路由(和面试官吹项目亮点)

项目中你不知道的Axios骚操作(手写核心原理、兼容性)

VuePress搭建项目组件文档

原文链接

juejin.cn/spost/73471...

相关推荐
东东2334 分钟前
前端开发中如何取消Promise操作
前端·javascript·promise
掘金安东尼9 分钟前
官方:什么是 Vite+?
前端·javascript·vue.js
柒崽10 分钟前
ios移动端浏览器,vh高度和页面实际高度不匹配的解决方案
前端
渣哥26 分钟前
你以为 Bean 只是 new 出来?Spring BeanFactory 背后的秘密让人惊讶
javascript·后端·面试
烛阴35 分钟前
为什么游戏开发者都爱 Lua?零基础快速上手指南
前端·lua
大猫会长44 分钟前
tailwindcss出现could not determine executable to run
前端·tailwindcss
Moonbit1 小时前
MoonBit Pearls Vol.10:prettyprinter:使用函数组合解决结构化数据打印问题
前端·后端·程序员
533_1 小时前
[css] border 渐变
前端·css
云中雾丽1 小时前
flutter的dart语言和JavaScript的消息循环机制的异同
前端
地方地方1 小时前
Vue依赖注入:provide/inject 问题解析与最佳实践
前端·javascript·面试