修改Create React App的PUBLIC_URL后，webpack-dev-server为何无限重载？

问题背景 #

• 基于未执行eject操作的Create React App 5 fork版本，修改PUBLIC_URL为file://build/以适配Electron应用（该应用通过file://加载HTML文件）
• 修改后，webpack-dev-server 5运行时编辑文件，Hot Module Replacement（HMR）会触发无限窗口重载，而非仅单次重载
• 排查HMR源码发现：客户端加载时获取当前bundle哈希值，HMR通知新哈希值后进行对比，若不同则触发替换或全页重载（此处因修改src/index文件触发全页重载）；但初始哈希值从未更新为新哈希，导致每次对比失败，引发无限重载循环

原因分析 #

Create React App的HMR客户端逻辑依赖PUBLIC_URL正确解析资源路径和哈希同步机制。当PUBLIC_URL设为file://本地文件协议时，会破坏webpack-dev-server客户端的正常路径解析：

• webpack-dev-server客户端默认通过HTTP协议的路径获取哈希值，file://协议无法让客户端与dev-server建立有效的哈希同步通道
• 初始哈希值存储时因路径解析错误，后续新哈希值无法覆盖旧值，每次HMR通知都会判定哈希不同，触发全页重载，形成循环

解决方案 #

方案1：分环境配置PUBLIC_URL #

开发环境保持默认PUBLIC_URL（空或/），仅在生产构建Electron应用时设置为file://build/，通过环境变量区分：
修改package.json中的脚本：

"scripts": {
  "start": "PUBLIC_URL=/ react-scripts start",
  "build": "PUBLIC_URL=file://build/ react-scripts build"
}

方案2：用工具覆盖HMR配置（无需eject） #

使用react-app-rewired或craco覆盖webpack-dev-server的HMR配置，强制客户端使用HTTP协议连接dev-server：

1. 安装依赖：

npm install react-app-rewired --save-dev

2. 项目根目录创建config-overrides.js：

module.exports = function override(config, env) {
  if (env === 'development') {
    // 强制HMR客户端使用dev-server的WebSocket地址，忽略PUBLIC_URL的file协议
    config.devServer = {
      ...config.devServer,
      client: {
        webSocketURL: {
          hostname: 'localhost',
          protocol: 'ws',
          port: config.devServer.port || 3000,
        },
      },
    };
  }
  return config;
};

3. 更新package.json脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build"
}

方案3：修改fork的CRA源码 #

在你的CRA fork版本源码中，找到处理HMR哈希值的相关文件（如react-scripts/packages/react-scripts/config/webpack.config.js），添加逻辑判断：开发环境下忽略PUBLIC_URL的file://协议，强制使用dev-server的HTTP路径进行哈希获取和更新。

内容的提问来源于stack exchange，提问作者jared_hexagon