HTML怎么做module federation_html Module Federation模块联邦【步骤】-html教程-PHP中文网

html本身不直接参与module federation，真正起作用的是html-webpack-plugin与modulefederationplugin协同注入remoteentry.js；必须先加载remoteentry.js再执行主应用js，否则报“container not found”错误。

html怎么做module federation_html module federation模块联邦【步骤】

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 必须通过 <script></script> 标签提前加载，否则 import('app1/Button') 会报 Container not found 错误。

如果不使用 html-webpack-plugin，就得手动在 HTML 中写死 <script src="http://localhost:3001/remoteEntry.js"></script>，无法适配不同环境（开发/测试/生产）
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 必须已存在才能被识别。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

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，不能靠前端运行时拼接，必须在构建阶段注入。

在容器应用的 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。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！