Webpack编译停滞问题：craco配置微应用后热更新卡住

以下是针对性的修复方案：

1. 区分开发/生产环境配置（核心修复） #

开发环境下启用output.module（ES模块输出）会和Webpack Dev Server的热更新机制冲突，因为热更新依赖CommonJS模块的HMR接口，ES模块的HMR支持尚未完善。需要仅在生产环境开启微应用相关配置：

修改你的craco.config.js：

module.exports = {
  webpack: {
    configure: (config) => {
      const modifiedConfig = { ...config };

      // 保留多入口配置
      modifiedConfig.entry = {
        app: "./src/app.js",
        main: "./src/index.js",
      };

      if (process.env.NODE_ENV === 'production') {
        // 生产环境才配置微应用模块输出
        modifiedConfig.experiments = {
          outputModule: true,
        };
        modifiedConfig.output = {
          ...config.output, // 继承原配置的publicPath等关键参数
          library: {
            type: "module",
          },
          filename: "[name].js",
          path: __dirname + "/dist",
        };
      } else {
        // 开发环境保留原生output配置，确保热更新正常
        modifiedConfig.output = {
          ...config.output,
          filename: "[name].js",
        };
        // 删除开发环境的experiments配置，避免冲突
        delete modifiedConfig.experiments;
      }

      return modifiedConfig;
    },
  },
};

2. 为多入口添加热更新接受逻辑 #

多入口场景下，需要每个入口文件手动声明接受热更新，否则Webpack无法完成模块替换：

在src/app.js末尾添加：

if (process.env.NODE_ENV === 'development' && module.hot) {
  module.hot.accept();
}

在src/index.js末尾添加同样的代码。

3. 清除缓存并重启服务 #

删除项目根目录下的node_modules/.cache文件夹，然后重新运行craco start，避免缓存导致的异常。

问题原因说明 #

• 开发环境启用output.module会破坏Webpack Dev Server的热更新流程，ES模块的热替换机制尚未完全适配开发环境。
• 多入口配置未添加热更新接受逻辑，导致Webpack编译后无法完成模块替换，一直卡在编译状态。
• 开发环境手动指定output.path为物理目录，会干扰Webpack Dev Server的内存文件系统监听，引发更新异常。

内容的提问来源于stack exchange，提问作者Alexis Lapeze