Webpack 5模块联邦如何实现JavaScript代码的跨应用共享

Webpack 5引入的模块联邦（Module Federation）是官方提供的跨应用代码共享方案，它打破了传统应用构建的边界，允许不同独立构建的前端应用在运行时动态加载彼此暴露的JavaScript模块，无需将共享代码重复打包到每个应用的产物中，非常适合微前端架构、多应用公共组件复用等场景。

模块联邦核心概念

模块联邦的运行依赖两个核心角色的配置，理解这两个角色是完成跨应用共享的基础：

• 远程应用（Remote）：需要对外暴露可共享JavaScript模块的应用，它会把自己内部的指定模块打包成独立的远程入口，供其他应用加载使用。
• 宿主应用（Host）：需要使用其他应用暴露的共享模块的应用，它会在运行时动态拉取远程应用的模块，像使用本地模块一样调用这些共享代码。

除此之外还有一个关键配置项shared，用于声明多个应用间需要共享的第三方依赖，避免同一个依赖被重复加载，进一步减小整体资源体积。

远程应用配置示例

首先我们需要在远程应用的Webpack配置中启用模块联邦插件，并声明要暴露的模块。以下是一个典型的远程应用配置：

// webpack.config.js 远程应用配置
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'remoteEntry.js',
    // 远程应用的资源公共路径，实际项目中替换为真实部署地址
    publicPath: 'http://localhost:3001/'
  },
  plugins: [
    new ModuleFederationPlugin({
      // 远程应用的唯一标识，宿主应用会通过这个名称引用模块
      name: 'remote_app',
      // 远程入口文件名，宿主应用会加载这个文件获取模块信息
      filename: 'remoteEntry.js',
      // 要暴露的模块，键是模块别名，值是模块对应的本地路径
      exposes: {
        './utils': './src/utils/index.js',
        './Button': './src/components/Button.js'
      },
      // 共享的依赖，这里声明react和react-dom，避免重复加载
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true }
      }
    })
  ]
};

上面的配置中，我们暴露了工具函数模块和按钮组件，同时声明了react相关依赖为单例共享。远程应用构建后会生成remoteEntry.js文件，这个文件包含了所有暴露模块的信息和加载逻辑，宿主应用就是通过加载这个文件来获取远程模块的。

宿主应用配置示例

宿主应用同样需要配置模块联邦插件，声明要引用的远程应用信息，之后就可以在代码中直接使用远程模块了：

// webpack.config.js 宿主应用配置
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    publicPath: 'http://localhost:3000/'
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'host_app',
      // 声明远程应用，键是远程应用别名，值是远程入口的访问地址
      remotes: {
        remote_app: 'remote_app@http://localhost:3001/remoteEntry.js'
      },
      // 宿主应用也声明共享依赖，和远程应用的共享依赖匹配
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true }
      }
    })
  ]
};

配置完成后，在宿主应用的业务代码中就可以像引入本地模块一样引入远程模块：

// 宿主应用业务代码
import React from 'react';
// 引入远程应用暴露的按钮组件，路径格式为 远程应用别名/暴露的模块别名
import Button from 'remote_app/Button';
import { formatTime } from 'remote_app/utils';

function App() {
  return (
    <div>
      <h1>宿主应用</h1>
      <p>当前时间：{formatTime(new Date())}</p>
      <Button type="primary">远程按钮</Button>
    </div>
  );
}

export default App;

关键配置参数说明

模块联邦的配置中有几个参数需要特别注意，直接影响共享效果：

注意事项

在实际使用模块联邦共享JavaScript代码时，需要注意以下几点：

• 远程应用的publicPath必须配置正确，否则宿主应用无法正确加载远程资源。
• 共享的依赖版本尽量保持一致，避免出现版本不兼容导致的运行错误。
• 远程模块如果更新，需要重新构建部署远程应用，宿主应用刷新后即可获取最新模块，无需重新构建宿主应用。
• 如果是在本地开发环境测试，需要确保远程应用和宿主应用的端口不冲突，并且跨域配置正确，允许宿主应用访问远程应用的资源。

Webpack_5模块联邦JavaScript跨应用共享微前端修改时间：2026-06-03 01:51:45