使用react-refresh-webpack-plugin时，无热更新能否自动刷新页面？

Great question! I’ve dealt with this exact issue before when working on React projects—nothing’s more frustrating than tweaking a utility file, config, or non-component code and having to manually refresh because HMR claims "nothing hot updated." Luckily, there are two reliable ways to configure your setup to auto-refresh in these cases:

1. Use the Plugin’s shouldRefresh Option (Granular Control) #

The @pmmmwh/react-refresh-webpack-plugin has a built-in shouldRefresh setting that lets you write custom logic to decide when a full page refresh is needed. This is perfect if you want to target specific file types or folders that react-refresh can’t hot-reload automatically.

Here’s how to add it to your Webpack config:

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  // ... rest of your Webpack config
  plugins: [
    new ReactRefreshWebpackPlugin({
      shouldRefresh: (filePath) => {
        // Customize these patterns to match your project structure
        const isReactComponent = filePath.match(/\.(jsx|tsx)$/);
        const isUtilityFile = filePath.includes('/src/utils/');
        const isConfigFile = filePath.endsWith('.json');

        // Return true to trigger a full refresh for non-component files
        return !isReactComponent || isUtilityFile || isConfigFile;
      },
    }),
  ],
};

Tweak the checks to fit your project—for example, add paths to your API clients, style files (if you’re not using CSS HMR), or any other code that doesn’t live in React components.

2. Let Webpack Dev Server Handle Auto-Refresh (Simpler Approach) #

If you don’t need granular control, you can adjust your Webpack Dev Server settings to fall back to a full refresh whenever HMR can’t handle an update. By default, setting hot: true will do this, but if you’ve been using hot: 'only' (which prevents full refreshes even when HMR fails), switching back will fix the issue.

Update your dev server config:

module.exports = {
  // ... rest of your Webpack config
  devServer: {
    // Replace 'hot: "only"' with this:
    hot: true,
    // Keep your other dev server settings
    open: true,
    port: 3000,
    overlay: { errors: true, warnings: false },
  },
};

This will trigger a full refresh for any change that HMR can’t hot-reload, which works well if you don’t want to spend time defining file patterns.

Bonus: Debug HMR Activity #

If you’re unsure which files are causing the "[HMR] Nothing hot updated" message, enable verbose logging in the plugin to see exactly what’s being processed:

new ReactRefreshWebpackPlugin({
  logger: {
    error: console.error,
    log: console.log,
  },
}),

This will print detailed logs to your browser console, showing which files are being checked for hot-reloading. Use this to refine your shouldRefresh logic if needed.

内容的提问来源于stack exchange，提问作者Márius Rak