Webpack 5 Dev Server热重载失效：页面自动刷新而非热更新

以下是针对你遇到的问题（页面自动刷新而非热更新、热更新文件找不到）的常见排查方向：

• HMR核心配置遗漏
  Webpack 5对HMR的启用要求更严格，检查webpack.config.js：

  1. 确保Dev Server配置中开启hot: true：

     module.exports = {
       devServer: {
         hot: true,
         port: 9090
       }
     }
     

  2. 插件数组中必须添加HotModuleReplacementPlugin：

     const webpack = require('webpack');
     module.exports = {
       plugins: [new webpack.HotModuleReplacementPlugin()]
     }
     

  3. TypeScript项目注意：ts-loader需配合transpileOnly: true（避免类型检查阻塞HMR），同时用fork-ts-checker-webpack-plugin做异步类型检查：

     const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
     module.exports = {
       module: {
         rules: [
           {
             test: /\.tsx?$/,
             use: [
               {
                 loader: 'ts-loader',
                 options: { transpileOnly: true }
               }
             ]
           }
         ]
       },
       plugins: [new ForkTsCheckerWebpackPlugin()]
     }
     

• 路径配置不匹配
  错误提示找不到热更新文件，大概率是output和Dev Server的路径配置不一致：

  1. 确保output.publicPath和Dev Server的static.publicPath（如果设置）一致，比如都设为'/'：

     const path = require('path');
     module.exports = {
       output: {
         path: path.resolve(__dirname, 'dist'),
         filename: '[name].[contenthash].js',
         publicPath: '/'
       },
       devServer: {
         static: {
           directory: path.resolve(__dirname, 'dist'),
           publicPath: '/'
         }
       }
     }
     

  2. 避免手动拼接Windows路径，全部用path.resolve或path.join生成，防止斜杠混用导致的解析错误。

• 缓存与旧文件干扰
  旧的构建缓存或残留文件可能导致热更新异常：

  1. 手动删除dist目录，执行rd /s /q dist（Windows）或rm -rf dist（类Unix）
  2. 临时禁用Webpack缓存，在webpack.config.js中添加：

     module.exports = {
       cache: false
     }
     

  3. 完全重启Dev Server，不要仅刷新页面。

• TypeScript配置冲突
  升级后TS配置可能和Webpack 5不兼容：

  1. 检查tsconfig.json的target设置为ES6或更高，module设置为ESNext或CommonJS，确保编译后的代码支持HMR
  2. 如果开启了isolatedModules，确认ts-loader或其他TS loader支持该模式，否则临时关闭测试。

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