Webpack 模块联邦 VS npm 私服

一、Webpack 模块联邦

1、Webpack 模块联邦介绍

可以在多个独立应用之间共享和复用核心业务逻辑，避免代码重复，提高开发效率和维护性

模块联邦是 Webpack 5 引入的功能，允许将应用拆分为多个独立的模块，并在运行时动态加载和共享这些模块。关键概念包括：

• Host（宿主应用）：消费其他应用模块的应用。

• Remote（远程应用）：提供模块给其他应用使用的应用。

• Shared（共享模块）：在多个应用之间共享的依赖（如 React、Lodash）

 1-1 远程应用Remote

        在webpack中开启模块联邦功能，并运行该远程应用

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  output: {
    publicPath: 'http://localhost:3001/', // 远程应用的公共路径
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp', // 远程应用的名称
      filename: 'remoteEntry.js', // 远程入口文件
      exposes: {
        './CoreLogic': './src/coreLogic.js', // 暴露核心业务逻辑模块
      },
      shared: {
        react: { singleton: true }, // 共享 React
        'react-dom': { singleton: true }, // 共享 ReactDOM
      },
    }),
  ],
};

 1-2 配置宿主应用Host

启用webpack联邦服务

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  output: {
    publicPath: 'http://localhost:3000/', // 宿主应用的公共路径
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp', // 宿主应用的名称
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js', // 引用远程应用
      },
      shared: {
        react: { singleton: true }, // 共享 React
        'react-dom': { singleton: true }, // 共享 ReactDOM
      },
    }),
  ],
};

1-2-1 在宿主应用的代码中动态加载并使用远程模块，运行宿主环境

import React, { useEffect } from 'react';

const App = () => {
  useEffect(() => {
    import('remoteApp/CoreLogic').then(({ coreLogic }) => {
      coreLogic(); // 调用远程应用的核心逻辑
    });
  }, []);

  return <div>Host Application</div>;
};

export default App;

1-3 适用场景

• 微前端架构：多个独立应用共享核心逻辑。

• 跨团队协作：不同团队开发的应用复用公共模块。

• 插件化系统：动态加载第三方插件或模块。