#Hot module replacement

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

• Retain application state that is lost during a full reload.
• Save valuable development time by updating only what changed.
• Instantly update the browser when modifying CSS / JS in source code, almost comparable 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. Then, no WebSocket requests will be made 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. This reduces memory usage and improves build performance.

If you want to watch these directories, you can 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.