Webpack热模块替换（HMR）失效问题排查求助

Let's break down exactly why your HMR is failing (full page reloads first, then no updates at all) and walk through the fixes step by step:

1. You're using the wrong loader for CSS in development #

MiniCssExtractPlugin is built for production environments to extract CSS into standalone files. While it has experimental HMR support, it's not reliable for development workflows. Instead, use style-loader—it injects CSS directly into the DOM, which plays perfectly with HMR.

Update your CSS/SCSS rules in webpack.config.js to switch loaders based on environment:

// For .css files
{
  test: /\.css$/i,
  use: [
    // Use style-loader in dev, MiniCssExtractPlugin in production
    mode === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
    { loader: 'css-loader', options: { importLoaders: 1 } },
    { loader: 'postcss-loader', options: {
      plugins: [
        require('autoprefixer')({ overrideBrowserslist: ['last 3 versions', 'ie > 9'] })
      ]
    } },
  ],
},
// For .scss files
{
  test: /\.scss$/i,
  use: [
    mode === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
    { loader: 'css-loader', options: { importLoaders: 1 } },
    { loader: 'postcss-loader', options: {
      plugins: [
        require('autoprefixer')({ overrideBrowserslist: ['last 3 versions', 'ie > 9'] })
      ]
    } },
    'sass-loader'
  ],
},

2. Your entry file lacks HMR acceptance logic #

Even with --hot enabled, you need to tell Webpack how to handle updates for your CSS module. Add this snippet to your ./src/javascripts/index.js:

import application from "../stylesheets/application.scss";

// Add HMR acceptance logic
if (module.hot) {
  module.hot.accept('../stylesheets/application.scss', () => {
    console.log('Updated application.scss applied!');
    // style-loader will automatically inject the new CSS, no extra work needed here
  });
}

3. DevServer configuration needs tweaks #

Your devServer is missing a couple key settings that ensure HMR works reliably:

devServer: {
  port: 9000,
  contentBase: path.resolve(__dirname, 'build'),
  hot: true, // Explicitly enable HMR (redundant with --hot, but avoids edge cases)
  publicPath: '/' // Matches your output.publicPath to fix resource routing
},

Also, uncomment the publicPath in your output config:

output: {
  filename: mode === 'production' ? "[name]-[contenthash].js" : '[name].[hash].js',
  path: path.resolve(__dirname, 'build'),
  publicPath: '/' // Critical for HMR to find updated modules
},

4. Optional: Simplify MiniCssExtractPlugin HMR setting #

Your existing HMR toggle for production is fine, but you can simplify the boolean check for clarity:

new MiniCssExtractPlugin({
  filename: mode === 'production' ? "[name]-[contenthash].css" : "[name]-[hash].css",
  hmr: mode === 'development' // Straightforward environment check
}),

Final Checks #

1. Install style-loader if you haven't yet:

   npm install style-loader --save-dev
   

2. Restart your webpack-dev-server after making these changes—HMR requires a fresh start when modifying core config.

With these fixes, modifying your application.scss should trigger instant HMR updates without full page reloads.

内容的提问来源于stack exchange，提问作者medBouzid