面试回:webpack代理原理

前言

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

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…

原文链接:https://juejin.cn/post/7347190677505998882 作者:Dignity_呱

(0)
上一篇 2024年3月17日 下午5:12
下一篇 2024年3月18日 上午10:06

相关推荐

发表评论

登录后才能评论