#Hot module replacement

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

• Retain application state which is lost during a full reload.
• Save valuable development time by only updating what's changed.
• Instantly update the browser when modifications are made to CSS / JS in the source code, which is 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 will disable HMR and react-refresh, and Rsbuild will automatically fall back to dev.liveReload.

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

To disable both HMR and liveReload, set both dev.hmr and dev.liveReload to false. Then, no WebSocket requests will be made to the dev server on the page, and the page will not 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 dev.client config.

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

#File watching

By default, Rsbuild does not watch files in the .git/ and node_modules/ directories. When files in these directories changed, Rsbuild will not trigger a rebuild. This helps to reduce memory usage and improve 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

Please refer to HMR FAQ.