#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.

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 for more details.

#React Fast Refresh

To enable Fast Refresh in React projects, you also need to use the @rspack/plugin-react-refresh plugin.

See React - 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 plugin.

See Preact - Fast 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:

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

Each field below is an array of IDs:

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

You can customize the manifest filename with output.hotUpdateMainFilename. If you set output.module to true, Rspack generates the manifest as an ES module with the manifest data as its default export.