webpack-dev-server proxy代理模块

Published: · LastMod: November 22, 2022 · 836 words

webpack-dev-server proxy代理模块 🔗

接上篇研究vite的代理模块，我发现vite proxy部分使用的模块和平时webpack中代理使用的很多语法是一致的，那我就验证一下，究竟是不是使用的同一个东西

webpack-dev-server 🔗

webpack在进行开发时，我们会进行配置

image.png

webpack本身是没有dev服务的，dev服务是另一个库进行提供

也就是我们在初始化时安装的webpack-dev-server

webpack-dev-server/Server.js at master · webpack/webpack-dev-server (github.com)

在仓库的Server.js的2181行开始进行配置代理服务，其中使用的也就是http-proxy-middleware这个库

以下是伪代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

if (this.options.proxy) {
  const { createProxyMiddleware } = require("http-proxy-middleware");

  // 创建proxy上下文
  const getProxyMiddleware = (proxyConfig) => {
    if (proxyConfig.target) {
      const context = proxyConfig.context || proxyConfig.path;

      return createProxyMiddleware(
        /** @type {string} */ (context),
        proxyConfig
      );
    }

    if (proxyConfig.router) {
      return createProxyMiddleware(proxyConfig);
    }
  };
  
  // 这里proxy挂载在options上，是一个数组
  this.options.proxy.forEach((proxyConfigOrCallback) => {
    const handler = async (req, res, next) => {
      next();
    };

    middlewares.push({
      name: "http-proxy-middleware",
      middleware: handler,
    });

    middlewares.push({
      name: "http-proxy-middleware-error-handler",
      middleware: (error, req, res, next) => handler(req, res, next),
    });
  });

  middlewares.push({
    name: "webpack-dev-middleware",
    middleware: this.middleware,
  });
}

在初始化阶段，会把proxy下的所有配置都转换成数组形式

数组遍历创建代理上下文，通过http-proxy-middleware中暴露的方法createProxyMiddleware创建代理实例

最后所有的代理实例都会push到middlewares中统一注册

http-proxy-middleware 🔗

回到http-proxy-middleware中

createProxyMiddleware中创建HttpProxyMiddleware实例

返回的是其中的middleware

1
2
3
4

export function createProxyMiddleware(options: Options): RequestHandler {
  const { middleware } = new HttpProxyMiddleware(options);
  return middleware;
}

HttpProxyMiddleware 🔗

HttpProxyMiddleware在构造函数中创建了代理实例

1
2
3
4
5
6
7
8

class HttpProxyMiddleware {
  constructor(options: Options) {
	// ...

    this.proxy = httpProxy.createProxyServer({});
	// ....
  }
}

我们再看这个httpProxy

其实就是社区库https://github.com/http-party/node-http-proxy

这里就发现和vite最终使用的是同一个，不过webpack中有个http-proxy-middleware包裹了一层，有些许不一样

webpack proxy