问题标签 [webpack-module-federation]

现在，我在两个使用模块联合插件的不同项目中使用 Vaadin UI Web 组件库。一个应用程序依赖于另一个应用程序的代码。

我已经在两个项目中安装了主要@vaadin/vaadin依赖项，但由于捆绑包的大小，我不想在一个应用程序中导入洞包。Vaadin 主包包括不同的子包，例如@vaadin/vaadin-text-field.

对于共享依赖项，我目前包括@vaadin/vaadin-text-field. 但是，如果我想添加额外的 Web 组件或只在一个应用程序中使用一个 Web 组件怎么办。是否可以在不导入hole包的情况下以某种方式将主@vaadin/vaadin项目用作共享依赖项？

例子：

两个应用程序都使用这些共享依赖项：

我想要这样：

然后import '@vaadin/vaadin-text-field'在没有任何 Webpack 问题的情况下导入。

我正在尝试在 nextjs 应用程序之间使用模块联合（webpack 5）。我从这个例子（两个 nextjs 应用程序）开始，一切都按预期工作。从我的角度来看，问题在于只有当我在同一主机上同时拥有两个应用程序时，这才有效。next.config.js上的相关 webpack 配置部分如下（在其他应用程序中相同）

如果我只是删除服务器配置，它就不起作用。

可以在 nextjs 应用程序之间使用模块联合，而无需通过文件夹路径配置远程服务器并仅通过 url 引用远程应用程序？

我正在尝试了解 webpack 模块联合是如何工作的，但我不确定我是否正确理解了这个概念。

我创建了一个存储库，我想将其用作“ui 组件库”。有 webpack 配置：

然后我创建了一个单独的存储库，我可以使用它来使用 webpack 配置从 UI 组件库中导出：

但是在应用程序中，当我尝试使用以下命令导入库时：

当我运行时，npm start我得到 webpack 编译错误：

我可以看到编译后的输出文件，但是如果我在没有模块联合插件的情况下进行编译，它看起来是一样的，我不知道我应该期待什么变化来了解如何调试它。

可以找到重现此问题的示例存储库：

• ui组件库：https ://github.com/glitr-io/glitr-ui
• 应用程序：https ://github.com/glitr-io/glitr-web

可能值得知道我在 github 页面上托管了两个已编译的静态数据。这就是我尝试测试 webpack 是否能够从 url 获取 UI 库的方式。

我正在尝试使用 webpack 模块联合将一个大型的单体 React 应用程序拆分为微前端。我已经部署了远程模块，并且在本地运行开发服务器时运行良好，一切正常。但是在运行 yarn build 并部署消费者应用程序后，它失败并出现以下错误：

Uncaught (in promise) ChunkLoadError: Loading chunk 935 failed.

注释掉延迟加载的远程模块时，一切正常。

任何人都知道如何让 webpack 使用远程加载的模块正确构建？

这是我的消费者组件：

这是我的 webpack.prod.config.js 文件：

使用 Webpack Module Federation，在构建生产时如何保留开发文件名？

目前，它正在将它们全部更改为类似的数字，3279.js而不是类似的数字src_applications_myApp_jsx.js。

Webpack 配置的一部分：

问题是chunkFilename. 将其更改为'vendor/[id].js'也不会改变任何内容。

Webpack 的文档说该[name]属性仅在块有名称时才有效。所以我想，为什么没有设置名称？

在下面描述的工作区中，我无法使用ngx-build-plus 构建没有 package.json 的项目/插件。如果我改回默认构建器，它可以正常工作。工作区具有以下结构（为清楚起见，省略了大多数项目）：

我正在尝试实现有角度的 webpack-5 模块联合，我正在遵循示例：

https://github.com/alexzuza/angular-plugin-architecture-with-module-federation

在示例中，项目/插件没有自己的 package.json 并使用命令ng build plugins --prod构建它没有任何问题。

我已经用我以前没有项目文件夹的现有应用程序模仿了示例的结构。构建主应用程序不是问题。还构建共享库作品。但是尝试构建插件会产生：

在上面的终端输出中单击“\package.json”会毫无问题地在工作区根目录中打开 package.json。

将 package.json 从根目录复制到 projects/plugins/ 解决了这个问题。但是我不想复制文件。

编辑：如果我像这样将角度版本更新为旧版本（从 11.1.1 开始）：

构建工作。但是，这不是一个选项，因为这会在为应用程序提供服务时产生另一个错误。

任何如何解决此问题的想法将不胜感激。

文件 angular-errors.log 如下所示：

文件 2021-04-07T19_34_04_884Z-debug.log 如下所示：

我正在尝试使用 ModuleFederationPlugin 和 webpack 部署基于微前端的反应 Web 应用程序，但是当我尝试单独部署一个微前端时，我得到一个没有错误的白页。

我的 webpack 配置到生产：

我的 webpack 与 babel 通用：

我的带有 React-Router 的 App.js 组件：

当我在服务器中部署时，所有状态请求都是 200 并且 chrome 控制台没有错误

我正在使用 Module Federation 和 Relay Modern 试验微前端 (MFE) 架构。我的目标是在允许联合 UI 组件的同时尽量减少 API 调用的数量（Relay 提供的）。

该应用程序应如下所示：

在非联合应用程序中，我可以在根查询中传播片段：

CartButton_cart_Fragment在哪里

通过模块联合，组件被分发到 3 个应用程序：

• Shell：托管导航栏
• Products : 暴露ProductList组件
• Cart : 暴露CartButton组件

这意味着根查询和片段也是分布式的。现在中继编译器给出错误：

我猜这是因为模块联合在 webpack 中工作，所以中继编译器没有必要的信息来解析片段。

目前，我发现的唯一工作方式是拥有CartButton并ProductList进行自己的查询。然而，想象一个有许多联合组件的页面，独立查询的数量有点违背了 Relay 的目的。

所以我想知道是否有人尝试过将 Relay Modern 与 Module Federation 结合使用？目前这（传播联合片段）在技术上可行吗？

我目前正在使用 Webpack5 Module Federation 和 Angular 开发一个尊重微前端架构的项目。我正在处理一个有点 anondin 问题。事实上，我所有的微前端（远程）都可以完美地单独工作，但是在将它们集成到外壳（主机）中时。我出现了一个错误，并显示了应用程序上的一些错误。

这个错误来自 Angular Core，尤其是当有一个集成的 Angular Material 组件时。

关于这个问题最疯狂的是，当我激活 chrome 扩展“Redux Dev Tools”时它不再存在。你有什么想法 ？

共享库可能有问题，但我不知道在哪里？

我的主机和遥控器的各种配置。

壳：

遥控器 1：

遥控器2：

我正在使用Webpack 5，我想将angular项目组件添加到react项目中，但它不起作用。我的代码如下。

这个有角度的 webpack 代码如下

这个反应 webpack 代码如下

这样，我导入但组件不来。