Webpack devServer构建正常但接入TypeScript后不自动刷新浏览器

直接根因 #

• 配置中硬写的 target: 'node' 是自动刷新失效的核心触发点：该配置会让Webpack将产物打包为Node.js环境可运行的格式，不会向浏览器端注入devServer必需的WebSocket刷新客户端脚本，浏览器完全接收不到文件变更的重载信号，哪怕项目构建流程全部正常完成，也不会触发页面自动刷新。
• 这也完全匹配你遇到的故障场景：接入TypeScript时，你大概率参考了面向Node项目的TS+Webpack配置示例，把原本适配Node环境的target: 'node'配置带入了面向浏览器的前端项目，所以故障是在接入TS之后才出现的。
• 配置中硬写的 mode: 'production' 也会放大这个问题：devServer运行时走生产环境构建逻辑，生产模式默认关闭开发阶段的热更新相关注入逻辑，进一步阻断自动刷新链路。

其他已发现的配置问题 #

• 你粘贴的 .eslintrc.js 文件内容和 webpack.config.js 完全重复，根本不是ESLint的合法配置，会导致ESLint校验流程异常，需要重新核对补全该文件的实际配置内容。
• 当前devServer中使用的contentBase、watchContentBase是Webpack-dev-server v3版本的旧配置项，如果项目使用的是v4及以上版本，这部分配置已经完全失效，需要替换为新版写法。

修复调整参考 #

1. 直接移除配置中的 target: 'node' 字段，面向浏览器的项目不需要指定该值，Webpack默认会使用匹配web环境的打包逻辑，正常注入devServer的浏览器端刷新脚本。
2. 不要在基础配置中硬编码mode: 'production'，通过命令行参数区分环境即可：
   • 运行devServer开发调试时，传参指定--mode=development
   • 执行生产构建打包时，传参指定--mode=production
3. 如果使用v4及以上版本的webpack-dev-server，将devServer配置替换为兼容的写法：

   devServer: {
     static: {
       directory: path.resolve(__dirname, 'dist'),
       watch: true
     },
     devMiddleware: {
       writeToDisk: true
     },
     hot: true,
   }
   

4. 重新编写正确的 .eslintrc.js 配置内容，不要重复粘贴Webpack的配置逻辑。

内容的提问来源于stack exchange，提问作者Jean-Baptiste THERY