模块联邦 Module Federation

模块联邦（Module Federation）是 Webpack 5 引入的核心功能，旨在实现多个独立构建的前端应用在运行时动态共享代码、依赖或组件，支持微前端架构和跨项目模块复用。

‌模块联邦的核心概念‌

模块联邦通过去中心化的设计，允许不同应用在运行时直接共享模块，无需重复打包或依赖 NPM 安装。其核心特点包括：

  1. ‌独立构建与部署‌：每个应用（容器或远程）可单独开发、部署，通过暴露（exposes）和引用（remotes）机制实现模块共享。‌‌‌‌

  2. 运行时动态加载‌：模块按需异步加载，减少初始包体积，提升性能。‌‌

  3. ‌依赖共享‌：通过 shared 配置（如React、ReactDOM）避免重复加载，确保单例模式。‌‌‌‌

‌典型应用场景‌

  1. ‌微前端架构‌：将多个子应用集成到宿主容器中，实现技术栈解耦和独立部署。‌‌

  2. ‌跨项目组件复用‌：通用组件（如按钮、表单）可被多个项目动态引用，减少重复开发。‌‌

  3. 依赖优化‌：共享第三方库（如 Lodash ）以降低整体打包体积。‌‌

实现步骤与配置

  1. 使用 ModuleFederationPlugin 声明远程模块入口（remotes）和共享依赖（shared）。‌‌
1
2
3
4
5
6
7
8
9
10
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'container',
      remotes: { app1: 'app1@http://example.com/remoteEntry.js' },
      shared: { react: { singleton: true } }
    })
  ]
};
  1. 远程应用配置通过 exposes 暴露模块，并配置共享依赖
1
2
3
4
5
6
new ModuleFederationPlugin({
  name: 'app1',
  filename: 'remoteEntry.js',
  exposes: { './Button': './src/Button' },
  shared: { react: { singleton: true } }
});

webpack小抄

,

什么是 webpack

webpack 是一个用于现代 JavaScript 应用程序的静态模块绑定器。当webpack处理你的应用程序时，它会在内部构建一个依赖关系图，映射项目所需的每个模块，并生成一个或多个包（bundles）。

webpack 可以转换打包多种类型的文件、模块、资源，包括 ES Modules 、CommonJS 和 AMD 模块， 也可以将 TypeScript 转换为 JavaScript，将 Handlebars 字符串转换为函数，将图片转换为 Base64，你也可以自己编写插件（plugins）来实现将任何你的应用程序需要的资源进行转换与打包。

webpack 支持所有兼容 ES5 的浏览器。webpack 需要 Promise 来 import() 和 require.ensure() ，在更老旧的浏览器中使用 webpack 时，需要使用 polyfill。

当前（2021年1月19日）最新版本的 webpack 是 v5.15.0， 以下内容默认适用于该版本， 另外 webpack5 运行时需要 Nodejs 版本在 10.13.0 以上。

(2021年12月2日)做了部分更新，当前最新版本的 webpack 是 v5.64.4。

阅读更多