3

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

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

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

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

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

4

2 回答 2

2

我不知道您是否找到了解决方案，我遇到了同样的问题，我设法使用 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”文件夹的内容，然后立即重建应用程序主机。

于 2021-02-21T18:29:55.517 回答
0

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

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

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

于 2021-11-11T08:45:30.657 回答