热模块替换

本指南旨在帮助你使用VSCode进行神岛项目的调试，特别是如何利用模块热替换（HMR）编译功能来提升调试效率。通过HMR，你可以在编辑代码时实现自动编译，并即时将更新上传至神岛编辑器，从而大大加速调试和测试流程。

如何操作HMR服务器

开启服务器

在VSCode的左下角，你可以找到HMR服务器的状态指示。若服务器未开启，请点击启动HMR服务器按钮。系统将自动读取webpack配置并启动服务器。

• 图标颜色：橙色（表示服务器未启动）

开启后，HMR服务器将监听文件修改，并自动进行编译和上传。

重启/关闭服务器

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

• 图标颜色：绿色（表示服务器已启动并正常工作）

服务器异常处理

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

• 图标颜色：红色（表示服务器异常停止）

代码分离（多入口文件）

代码分离是 Webpack 中最引人注目的特性之一。它能够将代码分离到不同的 bundle 中，从而允许我们按需加载或并行加载这些文件。这一特性在优化前端性能方面发挥着至关重要的作用，因为它可以帮助我们获取更小的 bundle、控制资源加载优先级，并在使用合理的情况下极大减小加载时间。

然而，值得注意的是，代码分离也存在一些潜在的隐患：

• 重复模块问题：如果入口 chunk 之间包含一些重复的模块，这些重复模块可能会被引入到各个 bundle 中，从而导致不必要的代码冗余。

配置入口文件

需要在 outputAndUpdate 属性下设置一个对象，该对象将包含我们的入口文件配置。

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

在这个配置对象中，我们可以定义多个入口文件，Webpack 会根据这些入口文件生成不同的 bundle。以下是一个示例配置：

在上面的配置中，所有在 outputAndUpdate 对象中定义的入口文件都会被 Webpack 监听，并打包成不同的 bundle，然后上传至地图中。

需要注意的是：

• 在完整编译过程中，Webpack 仅会读取 outputAndUpdate 对象中的第一项配置作为主入口。
• 在进行热模块替换（HMR）编译时，Webpack 会监听 outputAndUpdate 对象数组中的所有配置，以便在开发过程中实现模块的热替换。

注意事项

监听范围与方式

• HMR服务器仅监听server和client目录下的入口文件。一旦这些文件发生变动，服务器将立即触发编译流程。
• 非监听文件（如node_modules、dist、webpack.config.js等）的修改不会触发编译。

配置文件管理

• 在启动HMR服务器之前，请确保所有相关配置文件（如webpack.config.js、dao3.config.json、tsconfig.json）已正确配置。
• 若在HMR服务器运行后修改配置文件，你需要重启服务器才能使更改生效。

别名差异

• 在完整编译流程中，项目文件通常被编译成多个小模块的JavaScript文件，并放置在dist文件夹中。此时，文件路径将基于tsconfig.js中的rootDir属性。
• 在HMR编译流程中，文件将从当前所在的server或client文件夹中读取，而不是从dist文件夹中读取。

神岛账户配置

• 在开启HMR服务器之前，请确保你已登录神岛账号并配置了地图。某些功能（如数据上传）可能依赖于这些配置。
• 若未登录或未配置，可能会影响到数据的上传和同步。

多工作区支持

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