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

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

## 什么是 HMR？

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

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

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

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

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

![HMR 实时更新演示](https://static.codemao.cn/pickduck/HJBNk__g1x.gif?hash=Fq9hwMXyh-2yGkZY1t42TXPsw57i)

## 如何使用 HMR？

### 1. 启动 HMR 服务器

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

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

![启动 HMR 服务器](/QQ20241128-233644.png)

### 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 和多入口文件有什么关系？**

<details>
<summary><b>点击查看：HMR 的多入口配置（高级）</b></summary>

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

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

```jsonc
// 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` 会被重新编译和热更新。

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

</details>

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

利用好 HMR，你将享受到如丝般顺滑的开发体验，将更多精力聚焦于创造游戏的核心乐趣。
<br/>
<br/>
<br/>
