编辑联合模块时由 Webpack-Dev-Server 实时重新加载 [英] Live Reload by Webpack-Dev-Server when editing a Federated Module

问题描述

我正在开发一款利用 Webpack Module Federation 的微前端的应用.

I am working on an app leveraging micro-frontends with the Webpack Module Federation.

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

My "host" app provides a login screen and a layout with menu, header and footer. My "modules" are sections of my app that accessible by a click on a menu's item.

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

While my default view is the "host" app, most of the work will be done in modules. The problem I am facing is that once I change a remote module's code - the app (host that I am looking at) does not live-reload which makes developer experience not as comfortable.

我可以单独打开模块(在它自己的端口上)并且实时重新加载可以工作，但这对我来说也不是一个好的开发者体验，因为我想看到整个画面，而不仅仅是子应用(微前端).

I could open the module individually (on its own port) and the live-reload will work but it is not a good developer experience for me as well because I'd like to see the whole picture, not only the sub-app (micro-frontend).

有没有办法让主机知道一个模块已经改变并且应该重新加载?

Is there a way to let the host know that a module has been changed and the reload should occur?

推荐答案

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

I don't know if you found a solution, I had the same problem and I managed to solve it using Chokidar.

这里是mf-sectors"是远程应用的文件夹

here, "mf-sectors" is the folder of remote app

您需要使用 npm(或 yarn)安装 chokidar

You need to install chokidar with npm (or yarn)

在宿主应用的 webpack.config 中:

in webpack.config of host app :

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 配置中:

And in the app remote webpack config :

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

这样，chokidar 将查看dist"的内容.您的应用远程文件夹，之后将立即重建应用主机.

With this, chokidar will look at the contents of the "dist" folder of your app remotes and will rebuild the app host right afterwards.

这篇关于编辑联合模块时由 Webpack-Dev-Server 实时重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！