代码调试(二)：使用 HMR 实现热更新

如果你觉得每次修改代码后，都要手动按 Alt+Q 重新构建项目很麻烦，那么 热模块替换 (Hot Module Replacement, HMR) 将是你的“超级加速器”。

什么是 HMR？

想象一下，你正在搭建一个复杂的场景，每当你移动一个积木，整个建筑都要被推倒重建，效率极低。

• 常规构建 (Alt+Q)：就像推倒重建。它会打包你所有的代码，无论改动多小。
• HMR：就像一个智能机器人，只替换你刚刚移动的那块积木，而建筑的其他部分保持不变。

开启 HMR 后，它会启动一个本地服务来“监视”你的代码文件。一旦你按下 Ctrl+S 保存文件，HMR 会：

1. 自动、增量地 重新编译发生变化的代码。
2. 即时、无刷新地 将更新推送到正在运行的游戏中。

这意味着你可以在 VS Code 中写代码，在旁边的创作端实时看到效果，极大地提升了开发效率和调试体验。

如何使用 HMR？

1. 启动 HMR 服务器

在 VS Code 界面的左下角，你会看到 HMR 服务器的状态按钮。

• 点击“启动 HMR 服务器” 来开启这个功能。

2. 理解状态指示器

服务器启动后，按钮的颜色会告诉你它的工作状态：

颜色	状态	含义
🟠 橙色	未启动	HMR 服务当前处于关闭状态。
🟢 绿色	正常运行	一切正常！ 服务器正在监视你的文件改动。
🔴 红色	发生异常	服务器遇到了问题，自动编译已停止。

3. 开始实时编码！

1. 确保 HMR 服务器处于 🟢 绿色 状态。
2. 打开任意 server/ 或 client/ 目录下的代码文件。
3. 修改一行代码，然后按下 Ctrl+S 保存。
4. 观察 VS Code 的终端，你会看到 HMR 自动开始编译。
5. 编译成功后，切换到创作端，无需点击“运行”，你的改动就已经生效了！

4. 关闭服务器

当你完成调试，准备关闭项目时，再次点击左下角的 🟢 绿色按钮，即可关闭 HMR 服务器。

常见问题与高级用法

Q: 为什么我修改了文件，HMR 没有反应？

A: HMR 默认只监视 server/ 和 client/ 目录下的入口文件及其依赖。如果你修改了 node_modules 或 webpack.config.js 等配置文件，是不会触发热更新的，需要重启 HMR 服务器。

Q: 红色的“异常”状态怎么办？

A: 通常是由于代码中存在严重的语法错误，导致 Webpack 无法编译。首先，检查终端输出的错误信息并修正你的代码。如果问题依旧，点击 🔴 红色按钮可以尝试重启服务器。

Q: HMR 和多入口文件有什么关系？

点击查看：HMR 的多入口配置（高级）

HMR 的一个强大之处在于它能同时监视多个独立的入口文件，这对于大型项目中的代码分离至关重要。

你可以在 dao3.config.json 的 outputAndUpdate 数组中配置多个入口：

// dao3.config.json
"outputAndUpdate": [
    // 入口一：打包主要的业务逻辑
    {
      "name": "bundle.js",
      "serverEntry": "src/App.ts",
      "clientEntry": "src/clientApp.ts"
    },
    // 入口二：打包一个独立的管理工具
    {
      "name": "admin-tool.js",
      "serverEntry": "src/admin/index.ts"
    }
]

• 完整构建 (Alt+Q)：只会构建数组中的第一项 (bundle.js)。
• HMR 模式：会同时监视和构建数组中的所有项。当你修改 src/admin/index.ts 时，只有 admin-tool.js 会被重新编译和热更新。

这种方式非常适合将核心玩法、活动玩法、管理工具等模块分离开，实现更高效的开发和加载。

现在，你已经掌握了如何利用 HMR 来加速你的开发循环。这将极大地提升你在 ArenaPro 中的创作体验。

---

上一篇：认识 Debug 与 Release 模式

下一篇：使用 VS Code 进行断点调试