最新 umi4-max 如何使用 webpack5 联邦模块

新项目用 umi4-max 搭建，部分功能想要使用其他项目的功能，不想重新开发，想到了使用 webpack5 的联邦模块，可以直接引用其他项目代码来实现共享代码。

理想很美好，现实很残酷。直接按照 webpack5 联邦模块的使用方法，并不能成功，而官方文档没有明确说明如何使用。

webpack 联邦模块如何使用呢？

理解：

• 使用场景：项目A有一个功能，项目B也想用。此时可以用。
• 使用前提：依赖 webpack5，且主要依赖相同（如都依赖react)

说明：项目A需要用项目B的代码，项目A为导入项目，项目B为导出项目。

相关配置字段说明：

字段名	类型	含义
name	string	必传值，即输出的模块名，被远程引用时路径为 name/{name}/name/
library	string	声明全局变量的方式，name 为 umd 的 name
filename	string	构建输出的文件名
remotes	object	远程引用的应用名及其别名的映射，使用时以 key 值作为 name
exposes	object	被远程引用时可暴露的资源路径及其别名
shared	object	与其他应用之间可以共享的第三方依赖，使你的代码中不用重复加载同一份依赖

1. 普通项目

1.1 导出项目

配置要导出的功能模块

// 配置文件

const { ModuleFederationPlugin } = require("webpack").container;
const packageDeps = require('../package.json').dependencies

new ModuleFederationPlugin({
  name: "app1",
  filename: "remoteEntry.js",
  // 表示导出的模块，只有在此申明的模块才可以作为远程依赖被使用。
  exposes: {
    "./CounterAppOne": "./src/components/CounterAppOne",
  },
  shared: {
    ...packageDeps,
    react: { singleton: true, eager: true, requiredVersion: deps.react },
    "react-dom": {
      singleton: true,
      eager: true,
      requiredVersion: deps["react-dom"],
    },
    "react-router-dom": {
      singleton: true,
      eager: true,
      requiredVersion: deps["react-router-dom"],
    },
  },
})

1.2 导入项目

配置要导入的功能模块的文件地址

// 配置文件

const { ModuleFederationPlugin } = require("webpack").container;
const packageDeps = require('../package.json').dependencies

new ModuleFederationPlugin({
  name: "container",
  // 将其它项目的 name 映射到当前项目中
  remotes: {
    app1: 'app1@http://localhost:3001/remoteEntry.js',
  },
  // 是非常重要的参数，制定了这个参数，可以让远程加载的模块对应依赖改为使用本地项目的 React 或 ReactDOM。
  shared: {
    ...packageDeps,
    react: { singleton: true, eager: true, requiredVersion: deps.react },
    "react-dom": {
      singleton: true,
      eager: true,
      requiredVersion: deps["react-dom"],
    },
    "react-router-dom": {
      singleton: true,
      eager: true,
      requiredVersion: deps["react-router-dom"],
    },
  },
})

react 项目中使用

// 通过 webpack 关联其它应用，然后按需加载
const CounterAppOne = React.lazy(() => import("app1/CounterAppOne"))

export default () => {
  return (
  	Loading

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.e1idc.net