正在回答，因为此问题是Google搜索的首选CRA with Module Federation

2022年1月25日更新- CRA 5已发布，之前的回答在2022年不相关，因为CRA 5支持Webpack 5。

我的GitHub template已更新为CRA 5，请将其用于CRA模块联合示例。

我留下了我的答案

2021年11月17日更新-基于这个答案，我创建了一个GitHub template，让其他任何试图使用CRA进行模块联合的人都能更容易地使用它。

尝试CRACO的Craco-module-federation插件

查看craco-module-federation存储库，了解CRA使用模块联合的示例。
要支持模块联合，您需要craco-module-federation CRACO插件（或编写您自己的CRACO配置）来覆盖CRA Webpack配置。

您还需要运行react-scripts的alpha版本，并更新所有依赖项。

craco-module-federation是CRACO的一个插件，它可以完成所需的繁重工作。
使CRA和模块联合工作的步骤如下：

使用带有Webpack 5支持的Create React App 5

npx create-react-app@next --scripts-version=@next --template=cra-template@next my-js-app
更多信息请点击此处https://github.com/facebook/create-react-app/discussions/11278
对于现有应用，删除node_modules，并安装react-scripts的alpha版本。然后解决所有依赖关系问题。

安装CRAC

npm install @craco/craco --save
更改您的package.json脚本以运行craco：

"scripts": {
  "start": "craco start",
  "build": "craco build"
}

使用CRACO配置覆盖Webpack配置

安装craco-module-federation插件，或者编写您自己的CRACO配置来覆盖webpack的配置以添加ModuleFederationPlugin。

添加您的模块联合配置

如果使用craco-module-federation插件，则为modulefederation.config.js;如果配置时未使用craco-module-federation插件，则为craco.config.js。

注意

*Create React App 5（含Webpack 5支持）为Alpha版本，您可能会遇到问题。
*Craco-Module-Federation尚未生产就绪

react-scripts仍使用webpack 4.x.x。您可以跟踪迁移here。
与此同时，您可以使用CRACO，这是一个在CRA上设置自定义配置而无需弹出的神奇工具。
按照说明在你的项目中设置CRACO，很简单。然后安装webpack 5，在尝试yarn start或build后，你会从React脚本中得到一个警告，说webpack 5不应该被安装。一个解决方案，正如他们所说，将SKIP_PREFLIGHT_CHECK=true添加到一个 .env 文件中。这是CRA团队升级时的临时修复，我强烈建议你以后删除它。继续使用CRACO是完全可以的。下面是一个基本的 .craco.js 文件的示例：

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

module.exports = ({ env }) => ({
  plugins: [
    {
      plugin: ModuleFederationPlugin,
      options: {
        shared: {
          ...allDeps,
          'styled-components': {
            singleton: true
          }
        }
      }
    }
  ],
});

请记住更改package.json脚本以运行craco：

"scripts": {
  "start": "craco start",
  "build": "craco build"
}

您甚至可以创建一个自定义插件，将其置于CRA之上，然后重用它。

不。为了升级CRA的当前webpack版本，您需要弹出。而且，CRA目前在webpack v4上，这对模块联合没有好处。所以您需要等到CRA的作者将继续使用webpack v5或创建您自己的模板并在其中实现联合））如果您想跟上进度，请遵循https://github.com/facebook/create-react-app/issues/9994

您可以使用名为craco-plugin-micro-frontend的插件

npm install --save-dev craco-plugin-micro-frontend

用你的craco.config.js

const microFrontedPlugin = require('craco-plugin-micro-frontend');

module.exports = {
  plugins: [
    {
      plugin: microFrontedPlugin,
      options: {
        orgName: 'my-org',
        fileName: 'my-app.js', // should same as package main
        entry: 'src/index.injectable.js', //defaults to src/index.injectable.js,
        orgPackagesAsExternal: false, // defaults to false. marks packages that has @my-org prefix as external so they are not included in the bundle
        reactPackagesAsExternal: true, // defaults to true. marks react and react-dom as external so they are not included in the bundle
        externals: ['react-router', 'react-router-dom'], // defaults to []. marks the specified modules as external so they are not included in the bundle
        minimize: false, // defaults to false, sets optimization.minimize value
        libraryTarget: 'commonjs2', // defaults to umd
        outputPath: 'dist',
        customJestConfig: {}, // custom jest configurations
      },
    },
  ],
};

您的package.json

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "build:lib": "REACT_APP_INJECTABLE=true craco build",
    ...
   }

欲了解更多信息，请点击此处：https://github.com/m-nathani/craco-plugin-micro-frontend#readme