HTML本身不参与微前端分发与装配，仅作挂载容器；真正起作用的是JS运行时的加载、生命周期接管和DOM注入逻辑，子应用必须导出mount等标准接口，否则将白屏或报错。
HTML 本身不参与微前端的“分发”与“装配”，它只是最终被挂载的容器；真正起作用的是 JS 运行时对子应用的加载、生命周期接管和 DOM 注入逻辑。90% 的“HTML 分发失败”，其实是子应用没导出 mount，或主应用没正确传入容器节点。
子应用的 index.html 只是壳，关键在 JS 生命周期导出
很多人以为改好 public/index.html 路径就能跑通微前端，结果上线后白屏或报 TypeError: app.mount is not a function。这不是 HTML 的问题，而是子应用构建产物没暴露标准接口。
- VUE 项目必须在外层包裹导出，不能只写
createApp().mount('#app')；要改成：export async function mount(props) {<br> const app = createApp(App);<br> app.mount(props.container);<br>} - React 项目禁用
ReactDOM.render()，改用ReactDOM.createRoot(container).render()，且 mount 函数必须接收props.container参数 - Webpack 构建必须设
output.libraryTarget: 'umd'和output.library: 'app1'，否则主应用无法通过import()或全局变量访问子应用模块 - 子应用所有静态资源（
.js、.css）路径必须为相对路径，或由主应用动态注入__webpack_public_path__，硬编码绝对路径上线必 404
主应用注册子应用时，entry 和 activeRule 必须严格对齐部署路径
子应用部署在 https://cdn.example.com/app1/，但主应用配置 entry: '/app1/'，就会因跨域或路径错误导致加载失败。这不是 CORS 配置能绕过的根本问题。
-
entry必须是完整可访问 URL（含协议），本地开发可用//localhost:8080，但上线必须写死https://sub1.example.com/app1/ - 子应用服务器需返回
Access-Control-Allow-Origin: https://main.example.com（不能只写*，若带 credentials） -
activeRule（如'/app1'）必须与子应用内部路由的base完全一致：Vue Router 设createRouter({ base: '/app1' })，React Router 传basename="/app1" - 若不一致，子应用内
useNavigate('/list')会跳到/list而非/app1/list，触发无限重定向
html-webpack-plugin 不是微前端核心，但能解决多 HTML 入口的构建混乱
它不负责运行时装配，只管构建阶段生成多个独立 HTML 文件——这对本地联调、预发布环境隔离很有用，但上线后这些 HTML 文件通常不会被主应用直接加载。
立即学习“前端免费学习笔记（深入）”；
- 每个子应用应单独构建，输出一个 JS 入口文件（如
app1.js），而非整套 HTML+JS+CSS -
html-webpack-plugin多实例配置适用于“伪微前端”场景（如多个管理后台共用一套登录页），但不是 qiankun / single-spa 的标准路径 - 若真要用它生成子应用 HTML，必须关掉自动注入逻辑（
inject: false），手动在模板里写<script src="app1.js"></script>，否则会注入错误 chunk - 注意
chunks参数：子应用 HTML 只该注入自己 + 公共依赖（如['common', 'app1']），避免把其他子应用 JS 也塞进去
最易被忽略的点是：子应用的样式逃逸和动态 DOM 插入（比如 Modal 挂到 document.body）根本不会被沙箱捕获，哪怕开了样式隔离也没用；解决方式不是关沙箱，而是从子应用内部约束挂载点、用 CSS Modules、并显式传 getContainer 到 UI 组件库的配置项里。
