#Hot module replacement

Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full page reload. This significantly speeds up development in several ways:

• Preserves application state that would be lost during a full reload.
• Saves valuable development time by updating only what changed.
• Instantly updates the browser when modifying CSS/JS in source code, similar to changing styles directly in the browser's dev tools.

#HMR toggle

Rsbuild has built-in support for HMR, which is enabled by default in development mode.

If you don't need HMR, set dev.hmr to false. This disables HMR and React Refresh, and Rsbuild automatically falls back to dev.liveReload.

export default {
  dev: {
    hmr: false,
  },
};

To disable both HMR and live reload, set both dev.hmr and dev.liveReload to false. This prevents WebSocket requests from the page to the dev server, and the page won't automatically refresh when files change.

export default {
  dev: {
    hmr: false,
    liveReload: false,
  },
};

#Specify HMR URL

By default, Rsbuild uses the host and port number of the current page to construct the WebSocket URL for HMR.

When the HMR connection fails, you can specify the WebSocket URL by customizing the dev.client config.

export default {
  dev: {
    client: {
      host: 'localhost',
      protocol: 'ws',
    },
  },
};

#File watching

By default, Rsbuild doesn't watch files in the .git/ and node_modules/ directories. When files in these directories change, Rsbuild won't trigger a rebuild, which reduces memory usage and improves build performance.

If you want to watch these directories, manually configure Rspack's watchOptions.ignored to override the default behavior.

For example, to watch the node_modules/ directory and ignore the .git/ directory, you can configure it as follows:

export default {
  tools: {
    rspack: {
      watchOptions: {
        ignored: /\.git/,
      },
    },
  },
};

#FAQ

Refer to HMR FAQ.