Webpack热模块替换卡滞及WDS连接断开问题求助

我帮你梳理下这些HMR相关的问题，结合你给出的配置和使用的webpack版本，从几个关键方向排查解决：

1. 移除重复的HMR入口注入，避免连接冲突 #

你在compilerConfig.entry里手动添加了webpack-dev-server/client?http://0.0.0.0:9000/和webpack/hot/only-dev-server，但同时在Gulp任务里调用了WebpackDevServer.addDevServerEntrypoints(compilerConfig, serverConfig)——这个方法会自动为你注入HMR所需的客户端和热加载入口，手动添加会导致重复注入，进而引发连接异常（出现[WDS] Disconnected!）和日志不显示的问题。

解决方法：

• 把entry里的'webpack-dev-server/client?http://0.0.0.0:9000/'和webpack/hot/only-dev-server移除，只保留'babel-polyfill'和你的入口文件路径。
• 如果需要严格的无错误热更新，可以在serverConfig里设置hotOnly: true，替代手动添加only-dev-server的逻辑。

2. 开发环境禁用ExtractTextPlugin，解决CSS HMR冲突 #

你当前用ExtractTextPlugin提取CSS，但webpack 2.x版本中，ExtractTextPlugin和HMR完全不兼容——它会把CSS打包成独立文件，切断了CSS模块和HMR的关联，不仅会导致CSS无法热更新，还可能卡住整个HMR流程（出现[HMR] Waiting for update signal from WDS）。

解决方法：

• 根据NODE_ENV环境变量区分配置：开发环境下直接使用style-loader + css-loader + postcss-loader的组合，不要用ExtractTextPlugin；只有生产环境才启用ExtractTextPlugin提取CSS。
  修改后的CSS规则示例：

  {
    test: /\.(?:p|s)?css$/,
    use: NODE_ENV === 'development' 
      ? [
          'style-loader',
          { loader: 'css-loader', options: { sourceMap: true } },
          { loader: 'postcss-loader', options: { config: { path: path.join(__dirname, "postcss.config.js") } } }
        ]
      : ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            { loader: 'css-loader', options: { sourceMap: true } },
            { loader: 'postcss-loader', options: { config: { path: path.join(__dirname, "postcss.config.js") } } }
          ]
        })
  }
  

• 同时在plugins配置里，只有生产环境才实例化ExtractTextPlugin。

3. 完善Webpack Dev Server配置，启用热替换模式 #

你的serverConfig里缺少hot: true配置——虽然你添加了HotModuleReplacementPlugin，但需要明确告诉dev-server启用热替换模式，否则HMR信号无法正常传递。

解决方法：
在serverConfig里添加hot: true：

const serverConfig = {
  contentBase: path.resolve(ws.srcDir, 'client', 'src'),
  port: process.env.PORT || '9000',
  inline: true,
  host: '0.0.0.0',
  historyApiFallback: true,
  stats: { colors: true },
  headers: { 'Access-Control-Allow-Origin': '*' },
  hot: true // 新增这一行
};

4. 添加React组件的HMR接受逻辑 #

React组件的热替换需要手动触发重新渲染，否则即使webpack完成编译，浏览器也不会自动更新。

解决方法：
在你的入口文件index.js末尾添加HMR接受代码：

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

ReactDOM.render(<App />, document.getElementById('root'));

// 新增HMR接受逻辑
if (module.hot) {
  module.hot.accept('./App', () => {
    // 注意：如果你的组件用ES6 export default，需要取.default
    const UpdatedApp = require('./App').default;
    ReactDOM.render(<UpdatedApp />, document.getElementById('root'));
  });
}

如果你的项目有多个组件，也可以使用react-hot-loader@3.x（适配webpack 2.x）来简化这个流程，它会自动处理组件的热替换，无需手动写accept逻辑。

5. 检查依赖版本兼容性 #

确保你的babel相关依赖和webpack 2.x兼容：

• babel-loader需要至少7.x版本（对应babel-core@6.x），如果是6.x版本可能会有编译异常，导致HMR卡住。
• 可以把babel-preset-es2015换成babel-preset-env，它更灵活，能更好地适配webpack 2.x的模块系统。

按照以上步骤逐一排查调整，应该能解决你遇到的Disconnected!、HMR日志不显示、浏览器不更新以及卡滞的问题。

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