Webpack5模块联邦跨应用共享JS代码教程

今天golang学习网给大家带来了《Webpack5模块联邦实现跨应用共享JS代码详解》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

模块联邦通过配置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 动态加载其暴露的模块：

• 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 设置。

以上就是《Webpack5模块联邦跨应用共享JS代码教程》的详细内容，更多关于的资料请关注golang学习网公众号！