Webpack 5.91.0与webpack-dev-server 5.0.4热重载失效求助

一、先解决 InjectManifest 多次调用的警告 #

这个警告大概率是开发环境下 Service Worker 与热重载的冲突导致的，优先处理它：

• 开发环境禁用 InjectManifest：Service Worker 本身和热重载逻辑不兼容，开发阶段完全可以跳过 Service Worker 打包，只在生产环境启用。修改 webpack.config.js 里的 Workbox 配置：

const { InjectManifest } = require('workbox-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    // 只在生产环境加载 InjectManifest
    process.env.NODE_ENV === 'production' && new InjectManifest({
      swSrc: './service-worker.js',
    }),
  ].filter(Boolean),
};

• 如果必须在开发环境用 Service Worker：添加排除规则，过滤热更新相关文件，避免重复打包触发警告：

new InjectManifest({
  swSrc: './service-worker.js',
  exclude: [/\.hot-update\./], // 排除热更新 chunk 文件
  enableInDevMode: true,
})

二、修复 React 热重载（HMR）失效问题 #

Webpack 5 对 HMR 的配置要求和 Webpack 4 有差异，结合 @pmmmwh/react-refresh-webpack-plugin 调整配置：

1. 确保依赖版本适配 #

Webpack 5 需要插件的最新版本，先升级依赖：

npm install @pmmmwh/react-refresh-webpack-plugin@latest react-refresh@latest

2. 调整 Webpack 核心配置 #

修改 webpack.config.js，重点关注这些配置项：

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

module.exports = {
  mode: 'development', // 必须是开发模式
  target: 'web', // Webpack 5 默认 target 可能影响 HMR，显式指定为 web
  devServer: {
    hot: 'only', // 热重载失败时不自动刷新页面，符合你的非实时重载需求
    liveReload: false,
    open: true,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ReactRefreshWebpackPlugin(), // 注意：这个插件依赖 HMR Plugin，顺序无关但必须同时存在
  ],
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-react', '@babel/preset-typescript'],
              plugins: [
                // 只在开发环境注入 React Refresh 插件
                process.env.NODE_ENV === 'development' && 'react-refresh/babel',
              ].filter(Boolean),
            },
          },
        ],
      },
    ],
  },
};

3. 简化入口文件的 HMR 逻辑 #

index.tsx 里的代码不需要复杂的手动接受逻辑，React Refresh 插件会自动处理组件热更新，保留基础的 HMR 检测即可：

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

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(<App />);

if (module.hot) {
  // 仅保留 HMR 启用标记，组件更新交给插件处理
  module.hot.accept();
}

4. 检查启动命令 #

Webpack 5 已弃用旧的 webpack-dev-server 命令，改用 webpack serve，修改 package.json 的启动脚本：

"scripts": {
  "start": "webpack serve --mode development"
}

三、最后排查点 #

• 关闭开发环境下的代码压缩、缓存插件（如 terser-webpack-plugin、Webpack 内置缓存），这些可能干扰热重载；
• 打开浏览器控制台，查看是否有 HMR 连接错误或 React Refresh 相关报错，比如路径匹配问题，需确保 output.publicPath 和 devServer.publicPath 一致；
• 检查是否有其他插件（如代码分割、静态资源处理插件）和 HMR 冲突，开发环境暂时禁用这些插件测试。

内容的提问来源于stack exchange，提问作者Калдар Кайрат