Webpack Module Federation 微前端怎么配置？远程模块加载失败怎么排查？

Question

仓乃文 · Accepted Answer

Module Federation 是 Webpack 5 原生的微前端方案，允许运行时动态加载远程模块。配置不当最常见的报错是 Loading script failed 和 Shared module is not available，90% 是 publicPath 或 shared 版本不匹配导致的。基础配置： ```javascript // 远程应用（Remote）webpack.config.js const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); module.exports = { output: { publicPath: "auto", // 关键：让 Webpack 自动推断公共路径 }, plugins: [ new ModuleFederationPlugin({ name: "remoteApp", filename: "remoteEntry.js", exposes: { "./Button": "./src/components/Button", }, shared: { react: { singleton: true, requiredVersion: "^18.0.0" }, "react-dom": { singleton: true, requiredVersion: "^18.0.0" }, }, }), ], }; // 主应用（Host）webpack.config.js new ModuleFederationPlugin({ name: "hostApp", remotes: { remoteApp: "remoteApp@http://cdn.example.com/remoteApp/remoteEntry.js", }, shared: { react: { singleton: true, requiredVersion: "^18.0.0" }, "react-dom": { singleton: true, requiredVersion: "^18.0.0" }, }, }) ``` 使用远程组件： ```javascript const RemoteButton = React.lazy(() => import("remoteApp/Button")); function App() { return ( Loading...}> ); } ``` 加载失败排查清单： ``` 1. Loading script failed → 检查 remoteEntry.js 的 URL 是否可访问 → 检查 CORS 响应头 Access-Control-Allow-Origin → 检查 output.publicPath 是否设置为 "auto" 2. Shared module is not available → Host 和 Remote 的 shared 版本不兼容 → 确保两边都设置了 singleton: true → 检查 requiredVersion 是否匹配 3. 远程组件渲染空白 → 检查 Remote 是否正确 export 了组件 → 检查 React/ReactDOM 是否设置了 singleton → 浏览器 Network 面板看 chunk 是否全部加载成功 ```