cra 项目webpack-dev-server 热更新 windows 无效

项目中使用的脚手架 react-scripts 3.4.4, webpack 4 , webpack-dev-server 3.11.0

hrm热更新在mac用户下正常,

在windows下未能建立socket连接, 代码修改后能自动compile打包, 但是要手动刷新页面才能看到改动. weboack-dev-server未通知到客户端.

从webpack-dev-server的issues找到灵感 https://github.com/webpack/webpack-dev-server/issues/2961#issuecomment-758623117

将webpack-dev-server从3.11升级至4.0.0, 问题解决

以此记录一下消耗了3天时间的踩坑

 

------------------------------------------------------

补充, 升级后注意事项

1. 添加addWebpackAlias

 

addWebpackAlias({

'webpack-dev-server': path.resolve(
__dirname,
'../../node_modules/webpack-dev-server'
)

})

 

2. 

const compatibilityConfig = config => {
  delete config.before;
  delete config.after;
  delete config.public;
  delete config.overlay;
  delete config.watchOptions;
  delete config.quiet;
  delete config.publicPath;
  delete config.sockPort;
  delete config.sockPath;
  delete config.sockHost;
  delete config.injectClient;
  delete config.transportMode;
  delete config.watchContentBase;
  delete config.contentBasePublicPath;
  delete config.contentBase;
  delete config.clientLogLevel;
  delete config.disableHostCheck;
  //console.log('config',config)
  return {
    ...config
    //hot:true
  };
};
config = compatibilityConfig(config);

 

 

--------------------------------------------------------------------------------------

9.30 发现不用升级依赖包, 只是config删除这两个配置就能正常热更新

  delete config.injectClient;
  delete config.transportMode;