Webpack 4升级后HMR失效，无法检测文件变更求助

Let’s break this down step by step to get your root.js hot reloading working first—since you’ve already flagged loadAsyncComponent as incompatible with HMR, we’ll eliminate that variable first to focus on core HMR functionality.

1. Isolate the Root Component #

Start by temporarily removing all references to loadAsyncComponent across your codebase. Even indirect dependencies tied to root.js could disrupt HMR’s change-tracking. Ensure root.js loads synchronously with no async imports or components linked to it—this lets us test HMR in its simplest form.

2. Compare Webpack 3 vs 4 Config Differences #

Since you have a working Webpack 3 setup, focus on these key HMR-related changes in Webpack 4:

• Plugin Simplification: Webpack 4 enables NamedModulesPlugin by default in development mode, so you can remove it from your plugins array if you added it explicitly. You still need to keep HotModuleReplacementPlugin in your plugins list.
• DevServer Tweaks: Make sure your devServer config includes hot: true and hotOnly: true (the latter prevents full page reloads when HMR fails, making debugging easier). Double-check contentBase points to your correct public directory.
• Mode Requirement: Webpack 4 requires setting mode: 'development'—this enables built-in HMR optimizations that are disabled in production mode. Confirm this isn’t accidentally set to production.

3. Verify root.js HMR Implementation #

Ensure your root file has the correct HMR acceptance logic. A basic working setup looks like this:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const renderApp = (Component) => {
  ReactDOM.render(<Component />, document.getElementById('root'));
};

renderApp(App);

// HMR Acceptance Code
if (module.hot) {
  module.hot.accept('./App', () => {
    // Use require here to ensure Webpack picks up the updated module
    const UpdatedApp = require('./App').default;
    renderApp(UpdatedApp);
  });
}

Note: If you’re using ES modules, double-check default exports/imports—Webpack 4 handles module resolution slightly differently than v3, so mismatched exports can break HMR.

4. Rule Out Hidden Async Interference #

Even without loadAsyncComponent, other tools might add async behavior. Temporarily disable plugins like babel-plugin-dynamic-import-webpack and check your Babel config for any async-related transformations that could block HMR tracking.

5. Debug with Verbose Logs #

Add clientLogLevel: 'trace' to your devServer config. This will print detailed HMR activity in the browser console, showing whether changes are being detected but not applied, or not picked up at all.

Once root.js hot reloading works, you can gradually reintroduce other code and tackle the loadAsyncComponent compatibility issue separately—common fixes include using react-hot-loader with async components, or wrapping Webpack’s native import() syntax in HMR-aware utilities.

内容的提问来源于stack exchange，提问作者Clark T.