编辑联合模块时由 Webpack-Dev-Server 实时重新加载答案

【问题标题】：Live Reload by Webpack-Dev-Server when editing a Federated Module编辑联合模块时由 Webpack-Dev-Server 实时重新加载
【发布时间】：2021-03-03 06:38:41
【问题描述】：

我正在开发一个利用 Webpack Module Federation 的微前端的应用程序。

我的“主机”应用程序提供了一个登录屏幕和一个带有菜单、页眉和页脚的布局。我的“模块”是我的应用程序的部分，可通过单击菜单项访问。

虽然我的默认视图是“主机”应用程序，但大部分工作将在模块中完成。我面临的问题是，一旦我更改了远程模块的代码 - 应用程序（我正在查看的主机）不会实时重新加载，这使得开发人员体验不那么舒适。

我可以单独打开模块（在其自己的端口上）并且实时重新加载将起作用，但这对我来说也不是一个好的开发人员体验，因为我想看到整个画面，而不仅仅是子-应用程序（微前端）。

有没有办法让宿主知道模块已更改并且应该重新加载？

【问题讨论】：

你找到解决方案了吗？

标签： webpack webpack-dev-server federation micro-frontend webpack-module-federation

【解决方案1】：

我不知道你是否找到了解决方案，我遇到了同样的问题，我设法使用 Chokidar 解决了它。

这里，“mf-sectors”是远程应用的文件夹

你需要用 npm（或 yarn）安装 chokidar

在宿主应用的 webpack.config 中：

const chokidar = require('chokidar');

[...]
module.exports = { 
  devServer: {
      contentBase: path.join(__dirname, "public"),
      port: 3001,
      hotOnly:true,
      open:true,
      overlay: false,
      after: (app, server) => {
        chokidar.watch(
          [path.resolve(__dirname, '..', 'mf-sectors', 'dist')]
        ).on('all', () => {
          server.sockWrite(server.sockets, 'content-changed');
        });
      }
   },
}

并在应用程序中远程 webpack 配置：

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, "public"),
    port: 3002,
    writeToDisk: true,
  },
  output: {
    publicPath: "http://localhost:3002/",
  },
}

这样，chokidar 将查看您的应用程序遥控器的“dist”文件夹的内容，然后立即重建应用程序主机。

【讨论】：

不一定需要 chokidar。我们可以利用devServer 的watchFiles 属性。因此，在主机中，删除 after 并将其替换为 watchFiles: [path.resolve(__dirname, '..', 'mf-sectors', 'dist')] 就足够了。对于遥控器，我必须使用devServer: { devMiddleware: { writeToDisk: true, // needed for HMR }, }
使用此解决方案，远程应用的更新将导致完全重新加载而不是hmr。有没有解决方案可以将hmr保留在远程应用中？

【解决方案2】：

https://github.com/facebook/create-react-app/pull/11325

找到了在子应用程序之间使用 HMR 的解决方案。

在 webpack-dev-server 的配置中添加 CORS 标头。

【讨论】：