面试回：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 模块来创建代理服务器，并通过这个代理服务器来转发请求到目标服务器上。

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

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

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

后记

webpack代理原理？

我们再来总结一下回答：

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

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