#HotModuleReplacementPlugin

此插件用于实现 HMR（hot module replacement）。

#示例

启用 HMR 非常简单，在大多数场景下无需额外配置。

注意 HMR 不能被用于生产构建，因此你需要通过 process.env.NODE_ENV 来判断当前是否是开发环境。

import { rspack } from '@rspack/core';
const isDev = process.env.NODE_ENV === 'development';

export default {
  plugins: [isDev && new rspack.HotModuleReplacementPlugin()],
};

#运行时 API

当你注册 HotModuleReplacementPlugin 插件后，Rspack 会注入 HMR 相关的运行时 API，例如 module.hot 和 import.meta.webpackHot。

详见 模块热替换 API。

#React Fast Refresh

为了在 React 项目中启用 Fast Refresh 能力，你还需要使用 @rspack/plugin-react-refresh 插件。

请参考 React - Fast Refresh 了解更多信息。

#Preact Fast Refresh

为了在 Preact 项目中启用 Fast Refresh 能力，你还需要使用 @rspack/plugin-preact-refresh 插件。

请参考 Preact - Fast Refresh 了解更多信息。

#热更新清单

热更新时，运行时会读取 hot-update.json，确定需要更新的 chunk，以及需要移除的 chunk 或模块。清单中记录了它们的 ID，JavaScript 更新代码则存放在单独的 *.hot-update.(js|mjs) 文件中。

下面的示例表示更新 main chunk 的 JavaScript 和内置 CSS，无需移除任何 chunk 或模块：

{
  "c": ["main"],
  "r": [],
  "m": [],
  "css": { "c": ["main"] }
}

下表中的字段均为 ID 数组：

css 和 miniCss 是可选对象，其中的 c、r 字段为空时会省略。

你可以通过 output.hotUpdateMainFilename 自定义清单文件的名称。如果将 output.module 设为 true，Rspack 会将清单生成为 ES 模块，并通过默认导出提供清单内容。