🔥 热模块替换（HMR）指南

📋 概述

本指南详细介绍如何在 VSCode 中使用热模块替换（HMR）功能来优化神岛项目的开发调试流程。通过 HMR，创作者可以在编辑代码时实现自动编译，并即时将更新同步至神岛编辑器，显著提升开发效率。

🖥️ 服务器管理

状态指示器

HMR 服务器状态显示在 VSCode 左下角，通过颜色标识当前状态：

颜色	状态	说明
🟠 橙色	未启动	服务器尚未运行
🟢 绿色	正常运行	服务器工作正常
🔴 红色	异常	服务器运行出错

1️⃣ 启动服务器

步骤	操作说明
1	点击状态栏中的启动HMR服务器按钮
2	系统自动读取webpack配置并启动服务器
3	启动后，服务器将监听文件修改并自动编译上传

2️⃣ 重启/关闭服务器

若已启用服务器，你可以通过点击相同位置的按钮来关闭或重启服务器。

状态	按钮显示	操作效果
运行中	🟢 绿色	点击可关闭服务器

3️⃣ 服务器异常处理

有时，HMR 服务器可能会因各种原因停止运行。此时，图标将变为红色，并显示相应的错误信息。

状态	按钮显示	操作效果
异常	🔴 红色	点击可查看错误并尝试重启

📦 代码分离与多入口配置

代码分离原理

代码分离是 Webpack 的核心特性之一，它能够将代码拆分为多个独立的 bundle 文件，实现按需加载或并行加载。

优势	说明
更小的文件体积	获取更小的 bundle 文件
加载优化	控制资源加载优先级
性能提升	显著减少页面加载时间

警告

⚠️ 潜在问题：当多个入口 chunk 包含相同模块时，可能导致代码冗余

配置指南

基础配置

在outputAndUpdate属性中配置入口文件信息：

{
  "outputAndUpdate": [
    {
      "name": "bundle.js", // 打包后bundle文件名
      "serverEntry": "src/App.ts", // 服务端入口文件
      "clientEntry": "src/clientApp.ts" // 客户端入口文件
    }
  ]
}

编译模式对比

编译模式	配置读取方式	输出结果
完整编译模式	仅读取outputAndUpdate中的第一项配置作为主入口	生成独立的 bundle 文件
HMR 编译模式	监听outputAndUpdate中的所有配置	实现模块的热替换功能

配置示例

打包结果

⚠️ 注意事项

监听范围

文件类型	是否监听	说明
入口文件	✅ 是	HMR 服务器仅监听server和client目录下的入口文件
非监听文件	❌ 否	如node_modules、dist、webpack.config.js等的修改不会触发编译

配置管理

注意点	说明
启动前配置	启动前确保所有相关配置文件已正确配置
运行时修改	若在服务器运行后修改配置，需重启服务器生效

提示

💡 提示：相关配置文件包括 webpack.config.js、dao3.config.json、tsconfig.json 等

多工作区支持

在多工作区环境中，你可以在各自工作区分别开启 HMR 服务器。系统将自动判断当前工作区，并加载相应的配置文件。