关于Webpack HMR集成Single Spa及React相关实现的技术问询

1. React Hot Loader/React Fast Refresh是否自动添加module.hot.accept？ #

• React Hot Loader：会在编译阶段自动给组件注入热更新相关逻辑，包括自动处理module.hot.accept的调用，无需手动编写。它会包装组件并跟踪状态，实现组件级别的热替换。
• React Fast Refresh：通过配套的Babel插件与Webpack插件协作，不会直接在源码中插入module.hot.accept代码，而是通过转换组件代码实现热刷新能力，同时由Webpack插件自动处理模块的热接受逻辑，同样不需要手动编写module.hot.accept。

2. SystemJS如何处理Webpack Dev Server的HMR更新？ #

Single Spa依赖SystemJS加载微前端模块，而Webpack HMR默认适配自身模块系统，两者需要额外适配才能联动：

• 调整Webpack配置：将微应用的output.libraryTarget设为'system'，同时开启HMR相关配置（devServer.hot: true、添加HotModuleReplacementPlugin）。
• 手动关联SystemJS与HMR：Webpack Dev Server推送更新后，HMR Runtime会触发回调，但SystemJS仍持有旧模块引用，需在微应用入口文件中添加module.hot.accept的回调逻辑——比如调用SystemJS.delete(SystemJS.resolve('你的微应用模块名'))清除旧模块缓存，再通知Single Spa重新加载该微应用，或直接调用SystemJS.import重新导入模块并替换。
• 你遇到的“有socket交互但需手动刷新”问题，核心就是缺少上述关联步骤：Webpack已推送更新，但SystemJS未替换旧模块，页面仍在使用旧代码。

3. 不使用React热更新插件，仅用module.hot.accept实现HMR？ #

可以通过手动处理模块更新与组件重渲染实现，步骤如下：

1. 开启Webpack HMR配置：在webpack.config.js中设置devServer.hot: true，并添加HotModuleReplacementPlugin插件。
2. 在根组件文件中编写热更新逻辑：

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

const rootElement = document.getElementById('root');
let appInstance = ReactDOM.render(<App />, rootElement);

if (module.hot) {
  module.hot.accept('./App', () => {
    // 导入更新后的组件
    const UpdatedApp = require('./App').default;
    // 卸载旧组件并挂载新组件
    ReactDOM.unmountComponentAtNode(rootElement);
    appInstance = ReactDOM.render(<UpdatedApp />, rootElement);
  });
}

3. 注意事项：这种方式仅能实现模块级刷新，若需保留组件状态，需手动将状态存储在组件外部（如全局变量、Context或localStorage），否则刷新后状态会丢失。对于复杂组件结构，这种方式的便捷性远不如专用热更新插件。

内容的提问来源于stack exchange，提问作者Quang Khải Đảm