模块联邦（Module Federation）是 Webpack 5 引入的一项强大功能，允许不同模块之间共享代码并动态加载远程模块。它在微前端架构中尤为有用，能够实现跨应用的代码复用与动态扩展。

核心概念 ✅

  • 共享模块：通过 shared 字段声明可共享的依赖包
  • 远程入口：使用 remoteEntry.js 暴露模块给其他应用
  • 动态加载：利用 import() 语法按需加载远程模块
  • 命名规则：远程模块需通过 name 字段显式声明

实现步骤 🧰

  1. 创建共享模块

    // shared-module.ts
export function greet() {
  return 'Hello from shared module!';
}

  2. 配置 Webpack 远程入口

    // webpack.remote.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  entry: './src/bootstrap.ts',
  plugins: [
    new ModuleFederationPlugin({
      name: 'sharedModule',
      filename: 'remoteEntry.js',
      remotes: {},
      exposes: {
        './greet': './src/shared-module.ts'
      },
      shared: {
        lodash: { singleton: true, requiredVersion: '^4.17.21' }
      }
    })
  ]
};

  3. 加载远程模块

    // main.ts
import('./sharedModule').then(module => {
  console.log(module.greet()); // 输出: Hello from shared module!
});

进阶技巧 🚀

  • 使用 shared 实现依赖版本控制
  • 通过 remotes 动态引用其他联邦模块
  • 结合 import() 实现懒加载优化

扩展阅读 📚

想要深入了解模块联邦的高级用法？可以参考我们的Webpack 模块联邦指南获取更多实践案例！

Module Federation