HTML怎么做module federation_html Module Federation模块联邦【步骤】

陆砚码

2026-09-11 • 👁 1人浏览过

HTML本身不直接参与Module Federation，真正起作用的是html-webpack-plugin与ModuleFederationPlugin协同注入remoteEntry.js；必须先加载remoteEntry.js再执行主应用JS，否则报“Container not found”错误。 HTML 本身不直接参与 Module Federation，真正起作用的是

html-webpack-plugin

和 Webpack 的

ModuleFederationPlugin

协同注入远程资源。你看到的“HTML 做 module federation”，本质是让 HTML 文件正确加载远程模块入口（

remoteEntry.js

）并支持动态 import。为什么 html -webpack-plugin 必须配合 Module Federation 使用

html-webpack-plugin

负责生成最终的

index.html

，而 Module Federation 的远程模块依赖

remoteEntry.js

必须通过

，无法适配不同环境（开发/测试/生产）

html-webpack-plugin

在编译时把

remotes

配置转成 script 标签，并确保顺序：先加载

remoteEntry.js

，再执行主应用 JS 它还自动处理 publicPath、hash、CDN 前缀等，避免

__webpack_require__.e is not a function

类错误 remotes 配置必须写在 html-webpack-plugin 之前还是之后顺序无关紧要，但

ModuleFederationPlugin

必须在

html-webpack-plugin

的

plugins

数组中靠前位置 —— 因为

html-webpack-plugin

会在模板编译阶段读取 Webpack 的

compilation.assets

，而

ModuleFederationPlugin

生成的

remoteEntry.js

必须已存在才能被识别。 Webpack 插件执行顺序由插件自身注册逻辑决定，不是数组顺序；但保险起见，把

ModuleFederationPlugin

放

HtmlWebpackPlugin

前面更稳妥如果

html-webpack-plugin

先执行，它可能找不到

remoteEntry.js

，导致生成的 HTML 缺少对应 script 标签典型安全写法：

plugins: [
  new ModuleFederationPlugin({ /* ... */ }),
  new HtmlWebpackPlugin({ template: './public/index.html' })
]

如何让 HTML 正确加载带版本号的 remoteEntry.js 直接硬编码 URL 不可维护，要用

publicPath

+ 构建时变量控制。例如远程应用部署在

https://cdn.example.com/v1.2.0/remoteEntry.js

，不能靠前端运行时拼接，必须在构建阶段注入。使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更下载立即学习 “ 前端免费学习笔记（深入） ”；在容器应用的

webpack.config.js

中，用

process.env.REMOTE_URL

或

DefinePlugin

注入地址：

new ModuleFederationPlugin({
  remotes: {
    app1: `app1@${process.env.APP1_REMOTE_URL || 'http://localhost:3001/remoteEntry.js'}`
  }
})

确保

output.publicPath

和远程地址协议一致（都用

https://

），否则会触发 CORS 或跨域 script 加载失败若用 CDN，建议加 cache-busting 参数，如

https://cdn.example.com/remoteEntry.js?v=1.2.0

，避免浏览器缓存旧版

remoteEntry.js

最容易被忽略的一点：HTML 中 script 标签的加载是同步阻塞的，但 Module Federation 的远程模块加载是异步的。如果你在

index.html

的

内联脚本里立刻调用

import('app1/Button')

，大概率失败 —— 必须等

remoteEntry.js

的全局容器注册完成，这个时机由

import()

内部的

__webpack_init_sharing__

控制，不是 DOM ready。

相关文章