> For AI agents: the complete documentation index is available at https://rspack.rs/llms.txt, the full documentation bundle is available at https://rspack.rs/llms-full.txt.

# HotModuleReplacementPlugin

Enables hot module replacement (HMR).

## Examples

Enabling HMR is straightforward and in most cases no options are necessary.

Note that HMR can not be used in production build. You can use `process.env.NODE_ENV` to determine if it is a development environment.

```js title="rspack.config.mjs"
import { rspack } from '@rspack/core';
const isDev = process.env.NODE_ENV === 'development';

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

## Runtime API

When you register the `HotModuleReplacementPlugin` plugin, Rspack will inject HMR related runtime APIs, such as `module.hot` and `import.meta.webpackHot`.

See [HMR API](https://rspack.rs/api/runtime-api/hmr.md) for more details.

## React Fast Refresh

To enable Fast Refresh in React projects, you also need to use the [@rspack/plugin-react-refresh](https://www.npmjs.com/package/@rspack/plugin-react-refresh) plugin.

See [React - Fast Refresh](https://rspack.rs/guide/integrations/react.md#fast-refresh) for more details.

## Preact Fast Refresh

To enable Fast Refresh in Preact projects, you also need to use the [@rspack/plugin-preact-refresh](https://www.npmjs.com/package/@rspack/plugin-preact-refresh) plugin.

See [Preact - Fast Refresh](https://rspack.rs/guide/integrations/preact.md#preact-refresh) for more details.

## Hot update manifest

During HMR, the runtime reads `hot-update.json` to determine which chunks to update and which chunks or modules to remove. The manifest lists their IDs; the JavaScript updates are stored in separate `*.hot-update.(js|mjs)` files.

This example updates the JavaScript and built-in CSS for the `main` chunk without removing any chunks or modules:

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

Each field below is an array of IDs:

| Field       | Meaning and purpose                                                                                                     |
| ----------- | ----------------------------------------------------------------------------------------------------------------------- |
| `c`         | Chunks with JavaScript updates. The runtime loads their update files as needed.                                         |
| `r`         | Chunks to remove from the current runtime.                                                                              |
| `m`         | Modules to remove from the current runtime.                                                                             |
| `css.c`     | Chunks with updated built-in CSS. The runtime reloads their stylesheets.                                                |
| `css.r`     | Chunks whose built-in CSS was removed. The runtime removes their old stylesheets.                                       |
| `miniCss.c` | Same as `css.c`, for CSS extracted by [CssExtractRspackPlugin](https://rspack.rs/plugins/css-extract-rspack-plugin.md). |
| `miniCss.r` | Same as `css.r`, for CSS extracted by `CssExtractRspackPlugin`.                                                         |

`css` and `miniCss` are optional objects. Their `c` and `r` fields are omitted when empty.

You can customize the manifest filename with [output.hotUpdateMainFilename](https://rspack.rs/config/output.md#outputhotupdatemainfilename). If you set `output.module` to `true`, Rspack generates the manifest as an ES module with the manifest data as its default export.