模块联邦通过配置expose、remotes和shared实现跨应用模块共享。Remote应用暴露模块，Host应用动态导入并加载远程模块，同时共享依赖避免重复引入，运行时动态解析与加载，支持微前端独立构建与集成。
Webpack 5 的模块联邦（Module Federation）通过在构建时和运行时动态共享 JavaScript 模块，实现跨应用的代码复用。它允许一个应用（Host）在运行时从另一个应用（Remote）加载并执行模块，而无需将这些模块打包进本地 bundle。
1. 配置 Remote 应用暴露模块
在远程应用（提供方）的 Webpack 配置中，使用 ModuleFederationPlugin 暴露需要共享的模块：
name：定义远程应用的唯一标识名，用于其他应用引用。 exposes：声明要对外暴露的模块路径，例如组件或工具函数。
示例配置：
new ModuleFederationPlugin({ name: 'remoteApp', filename: 'remoteEntry.js', exposes: { './Button': './src/components/Button', './utils': './src/utils/common' }, shared: { ...deps, react: { singleton: true }, 'react-dom': { singleton: true } }})
2. Host 应用动态导入远程模块
主应用（消费方）在配置中引入远程应用，并通过 import 动态加载其暴露的模块：
立即学习“Java免费学习笔记（深入）”；
remotes：指定远程应用的加载地址，Webpack 会自动下载 remoteEntry.js 获取模块清单。 使用 import() 语法按需加载远程模块，支持懒加载和代码分割。
示例配置：
new ModuleFederationPlugin({ name: 'hostApp', remotes: { remoteApp: 'remoteApp@https://remote-domain.com/remoteEntry.js' }, shared: { react: { singleton: true }, 'react-dom': { singleton: true } }})
使用方式：
const Button = await import('remoteApp/Button');
3. 共享依赖避免重复加载
通过 shared 配置项，多个应用可共用同一版本的第三方库（如 React、Lodash），提升性能：
设置 singleton: true 确保全局只存在一个实例，防止冲突。 Webpack 在运行时协商依赖版本，优先使用已加载的版本。
4. 运行时动态解析与加载流程
当 Host 应用请求远程模块时，执行过程如下：
Host 加载 remoteEntry.js，获取远程模块的入口信息。 Webpack 的容器机制解析模块路径，建立模块注册表。 调用 import() 时，按需下载对应 chunk 并执行，返回模块实例。
基本上就这些。模块联邦让微前端架构中的应用真正实现运行时集成，既独立构建又可共享逻辑，关键是配置好 expose、remotes 和 shared 三部分。不复杂但容易忽略细节，比如版本对齐和 singleton 设置。
以上就是在模块联邦中，Webpack 5 如何实现 JavaScript 代码的跨应用共享？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525940.html
微信扫一扫 
支付宝扫一扫 
