webpack-hot-devserver

GitHub 仓库：https://github.com/ZengHaiTao1/webpack-hot-devServer
English README: README_EN.md

支持运行时修改代理配置且无需重启服务的轻量工具，适用于 webpack-dev-server / Express 等 Node.js 场景。

功能特性

• ✅ 动态热加载：监听并自动重载 proxy.config.js
• ✅ 向上查找配置：从当前工作目录向上寻找层级最高的 proxy.config.js
• ✅ 中间件缓存：为每个前缀缓存代理中间件，避免重复创建
• ✅ 日志与调试：彩色日志展示原始路径与实际代理路径
• ✅ 热更新友好：自动跳过 HMR 请求 (sockjs-node、.hot-update.、/__webpack_hmr)
• ✅ WebSocket 支持：按需代理，未匹配的 WS 请求放行给开发服务器

安装

npm install webpack-hot-devserver

快速开始

1. 在项目根目录（或任意上层）创建 proxy.config.js：

module.exports = {
  "/api": {
    target: "http://localhost:3000",
    changeOrigin: true,
    ws: true,
    secure: false,
    pathRewrite: { "^/api": "" },
  },
  "/upload": {
    target: "http://localhost:4000",
    changeOrigin: true,
    pathRewrite: { "^/upload": "/files" },
  },
};

2. 在 webpack-dev-server 中使用

const webpack = require("webpack");
const WebpackDevServer = require("webpack-dev-server");
const ProxyUtil = require("webpack-hot-devserver");
const config = require("./webpack.config.js");

const compiler = webpack(config);
const proxyUtil = new ProxyUtil();

const server = new WebpackDevServer(
  {
    // Vue CLI 4.5
    before(app) {
      app.use(proxyUtil.createDynamicProxyMiddleware());
    },
    // Vue CLI 5 / 原生用法
    onBeforeSetupMiddleware({ app }) {
      app.use(proxyUtil.createDynamicProxyMiddleware());
    },
  },
  compiler
);

server.startCallback(() => console.log("开发服务器已启动"));

3. 在 Express 中使用

const express = require("express");
const ProxyUtil = require("webpack-hot-devserver");

const app = express();
const proxyUtil = new ProxyUtil();

app.use(proxyUtil.createDynamicProxyMiddleware());

app.get("/", (req, res) => res.send("Hello World"));

app.listen(8080, () => {
  console.log("服务器运行在 http://localhost:8080");
});

API

• new ProxyUtil()
  • 自动从当前工作目录向上查找层级最高的 proxy.config.js
  • 创建时会立即加载配置并开始监听变更
• proxyUtil.getConfig()
  • 获取当前内存中的代理配置对象
• proxyUtil.createDynamicProxyMiddleware()
  • 返回可直接用于 Express / webpack-dev-server 的中间件
  • 命中前缀时动态创建并缓存对应的代理中间件

说明：当前版本不再接收构造函数参数（如 configPath、enableLog）；配置路径由内部自动解析。

配置选项

| 选项 | 类型 | 默认值 | 说明 | | -------------- | --------- | ------ | -------------------------------------------- | | target | string | 必填 | 目标服务器地址 | | changeOrigin | boolean | true | 是否改变请求头中的 origin | | ws | boolean | true | 是否支持 WebSocket 代理 | | secure | boolean | true | 是否验证 SSL 证书 | | pathRewrite | object | {} | 路径重写规则，键为正则表达式，值为替换字符串 |

路径重写示例

pathRewrite: {
  "^/api/v1": "/api",  // /api/v1/users -> /api/users
  "^/old": "/new",     // /old/path -> /new/path
  "^/remove": "",      // /remove/prefix -> /prefix
}

工作原理

1. 使用 fs.watch 监听 proxy.config.js，变更后清除 require 缓存并重载
2. 根据请求前缀匹配规则，动态创建并缓存代理中间件
3. 对 WebSocket 请求仅在配置匹配时代理，其他情况直接放行
4. 为请求/响应添加无缓存头与时间戳，打印彩色调试日志

注意事项

• 确保存在 proxy.config.js（缺失会直接抛错），需采用 CommonJS 导出
• 建议 Node.js 12+，并确保已安装 chalk、http-proxy-middleware
• 代理日志默认开启；如需静默可自行在外部包裹自定义日志逻辑

开发

npm install
npm run build       # 生产（压缩）
npm run build:dev   # 开发（含 sourcemap）
npm run watch       # 监听构建
npm run clean       # 清理 dist

License

MIT