如何禁用React应用的热加载/热重载功能？

为什么旧方案会失效 #

Create React App v5版本迭代后，webpack-dev-server默认将public目录纳入静态文件托管+实时监听范围。过往社区常用的关闭热更新的环境变量配置，仅针对src目录的模块热替换逻辑生效，无法管控public目录的文件变动监听规则，因此这类方案会完全失效。

可直接落地的解决方案 #

方案1：通过配置覆盖工具精准排除public目录监听（推荐，不影响src热更新） #

如果不想要执行eject暴露所有配置，可以通过craco、react-app-rewired这类轻量配置覆盖工具，直接修改dev server的文件监听规则，从根源阻止public目录变动触发的重载：

• 以craco配置为例，在项目根目录的craco.config.js中写入如下代码：

module.exports = {
  devServer: (originalConfig) => {
    originalConfig.watchFiles = {
      ignored: [
        /public[\\/]/,
        '**/node_modules/**/*'
      ]
    }
    return originalConfig
  }
}

• 如果使用react-app-rewired，配置逻辑完全一致，在config-overrides.js中对devServer参数做相同的覆盖即可。
  方案优势：该配置只会忽略public目录的文件变动事件，完全不影响src目录下代码修改的正常热更新，不会降低日常开发效率。

方案2：临时快速生效的环境变量配置 #

如果是临时测试场景，不需要长期维护配置文件，可以直接修改package.json的启动脚本，通过webpack内置watcher的忽略规则排除public目录的监听：

• 找到scripts块下的start启动命令，前置添加环境变量WATCHPACK_WATCHER_IGNORE=public即可，示例配置如下：

"scripts": {
  "start": "WATCHPACK_WATCHER_IGNORE=public react-scripts start"
}

避坑提醒 #

不要为了禁用public目录的重载直接关闭dev server的hot模式，该操作会连带导致src目录代码修改的热更新失效，反而大幅降低开发效率。我们需要做的是精准过滤public目录的文件监听事件，而非全量关闭热更新能力。

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