问题标签 [webpack-module-federation]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - webpack 模块联合中的 `eager` 是什么意思？initialConsumes 和 chunkMapping 有什么关系？
在我将 webpack 模块联合集成到我们的项目中之后，我仍然对此感到困惑。任何人都可以解释究竟是什么eager意思？initialConsumes还有和之间的关系是chunkMapping什么？似乎当我设置为时eager，true应用程序将在导入模块之前等待所有chunkMapping承诺完成initialConsumes？很难理解所有这些......
另外，我为什么要在 期间关心远程模块initialConsumes？
angularjs - 使用 webpack（或 webpack 模块联合）将 React MFE 与 Angular JS 项目（父项目）集成
我们有一个在 Angular JS 上的父项目或宿主项目，我们正在创建一个新的 React 应用程序，并希望将 React 应用程序作为 MFE 与宿主项目集成。我们不想在宿主项目中进行大量更改，但想检查我们是否可以在 Angular JS 项目中使用 webpack/webpack 模块联合来进行 MFE 集成。
提前感谢您提供的任何示例或建议
reactjs - 使用 Webpack 5 的模块联合，编写的 shell 是否可以响应主机或加载角度组件？
我们正在创建一个用 Angular 编写的网络应用程序，该应用程序将从另一个用 React 编写的网络应用程序嵌入/加载。我不确定这是否可以使用 webpack 5 的模块联合。
鉴于模块联合只是在运行时而不是构建时异步加载 JavaScript 模块（如果我错了，请纠正我），我是否正确地假设只有当我可以在不使用模块联合的情况下使 Angular 在 React 中工作时它才有效?
让我们假设 Angular 永远不能在 react 中工作，假设它在使用模块联合时也不能工作是否正确？
任何工作示例都值得赞赏。
reactjs - React 路由器 - 代码拆分惰性导入。外挂悬念切换
我正在使用来自 webpack 的模块联合，我的核心应用程序包含到应用程序其余部分的所有路由。工作正常的是在里面Switch，我只是拥有每个AuthRoute或Route手动而不是使用map. Suspense正在包装 Switch，以便直接子级只是Route. 我现在正在做一些拆分，但我无法让它工作。有任何想法吗？
我的路线是这样设置的（localRoutes 在底部）：
在我的内部，我BrowserRouter根据用户是否有权使用该路线来映射路线。我怀疑问题出在这里，但不明白为什么Route或AuthRoute返回 aRoute不起作用，因为它是Switch.
其中 authRoute：
和示例路线：
vue.js - 带有 Webpack 模块联合的 Vue 3 CLI：组件从错误的主机加载
我目前正在尝试建立一个使用 Webpack 的 Module Federation 来共享组件的项目。
为此，我使用 cli 设置了两个基本的 vue 项目，并在两个项目中添加了一个 vue.config.js 文件：
宿主项目（将包括共享组件）（在 localhost:8000 上运行）
组件项目（共享组件）（在 localhost:8001 上运行）：
我尝试在我的 App.vue 中加载组件：
实际上，它会尝试加载组件，但不是从 localhost:8001（组件所在的位置）加载它，而是尝试从 localhost:8000 加载它：
localhost:8001 上的相同路径确实存在。一些调试显示，webpack publicPath 似乎设置为“/”（导致 localhost:8000 的托管应用程序将 url 设置为/js/src_components_HelloWorld_vue.js）
我相信这是由于 vue-cli 与 webpack 交互的方式。这是一个已知问题吗？如何解决？
webpack - Webpack 5 模块联合失败处理
所以我开始使用 webpack 5 模块联合，它在主机和微前端之间运行得很好。
但我注意到，如果微前端服务器关闭，那么在主机应用程序中，当它尝试获取它remoteEntry.js并失败时，主机应用程序 ui 将根本无法启动。
如果它是一个不可用的依赖项，这是可以理解的，但我认为更好的解决方案是拥有一个类似于占位符的东西......而不是整个应用程序 ui 由于遥控器损坏而拒绝启动。
有什么解决办法吗？我认为 webpack 应该检查远程，如果失败，它会优雅地处理它。
如果微前端的目标是关注点分离，我认为远程资产可以阻止应用程序完全运行是很糟糕的。
angular - 为什么我的 ModuleFederation-Shell 不能正确加载我的微前端？
我正在尝试在 Angular 中开发我的第一个模块联合项目。我有一个外壳和一个微前端。在我的微前端中，我添加了一个带有一些示例数据的数据表（ https://l-lin.github.io/angular-datatables/#/getting-started ）。
当我只运行我的微前端时，一切正常。数据表正确呈现并显示了我的数据。我认为模块本身因此应该是正确的。
当我运行包含这个模块的 shell 时，我可以看到来自微前端的数据。但我收到一个 javascript 错误ERROR TypeError: $(...).DataTable is not a function。有谁知道，我做错了什么？
webpack - ModuleFederationPlugin 的“共享”配置中的“单例”选项究竟是如何工作的？
我正在阅读 Module Federation 文档，但我仍然不确定我是否正确理解了配置singleton选项的功能shared。
因此，例如：假设我有两个微前端应用程序，每个应用程序都需要一个特定的库（版本是否不同无关紧要）。如果我现在将singleton选项设置true为相应 webpack 配置中的两个条目，这是否意味着当 webpack 加载应用程序时，它会注意到两者都需要这个特定的库，并且它只下载这个库一次（根据您的配置调整版本或自动调整，如果设置为auto) 并因此减小捆绑包大小？
我的理解是正确的还是我遗漏了什么？
javascript - Webpack 5：重新加载/卸载联合模块
我使用类似于以下的逻辑来为我的应用程序动态加载 FM：
但是，假设 FM 的远程版本发生了变化，我想完全重新加载它，或者完全从我的应用程序上下文中删除它——这甚至可能吗？这样做的首选模式是什么？
javascript - 如何使用 webpack5 模块联合从另一个具有微前端架构的应用程序导入组件？
我正在尝试以角度实现 Webpack5 模块联合功能。我遵循了一些教程并且能够做到。我遵循的所有教程都显示了使用decl.d.ts路径更改文件从远程项目导入模块的过程。
我目前的要求是在一条路线上显示两个遥控器。
Example: I want to show remote1(header) & remote2(side-nav) on the route="/index" in host application.
为了实现上述要求，我假设将 header 和 sidenav 组件从 remote1 和 remote2 导入到主机应用程序会有所帮助。
我做了一些研究以找到如何导入组件，但我没有找到从远程导入主机应用程序中的组件的解决方案。
我已经在 webpack.config.js 文件中公开了该组件。
对此的任何帮助将不胜感激。谢谢