这里有两个不同的问题，如果您询问如何在CRA中添加webpack module federation，则可以使用名为react-rewired的内容
您可以覆盖CRA Webpack默认配置，如下所示。

/* config-overrides.js */

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}

您可以运行脚本react-scripts eject来停止隐藏它在幕后安装的内容，包括webpack config。

以下是React with Module Federation 5 https://github.com/sarat9/microfrontends中微前端的POC示例
在共享环境中使用插件“ModuleFederationPlugin”公开和导入模块。

唯一可行的方法是“弹出”CRA。但问题是它现在在webpack 4上，有很多突破性的变化，使它与版本5一起工作。我自己也在努力。订阅了。在“弹出”和从4到5的“迁移”之后，似乎主要的问题是路径。

有3个微前端，一个appshell（容器）

• 验证
• 集装箱
• Jmeter 板
• 行销

您必须自己编写配置文件。
1.用于身份验证（webpack.common.js）

module.exports = {
      module: {
        rules: [
          {
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-react', '@babel/preset-env'],
                plugins: ['@babel/plugin-transform-runtime'],
              },
            },
          },
        ],
      },
    };

（网页套件.装置. js）

const { merge } = require('webpack-merge');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
    const commonConfig = require('./webpack.common');
    const packageJson = require('../package.json');

    const devConfig = {
      mode: 'development',
      output: {
        publicPath: 'http://localhost:8082/',
      },
      devServer: {
        port: 8082,
        historyApiFallback: {
          index: 'index.html',
        },
      },
      plugins: [
        new ModuleFederationPlugin({
          name: 'auth',
          filename: 'remoteEntry.js',
          exposes: {
            './AuthApp': './src/bootstrap',
          },
          shared: packageJson.dependencies,
        }),
        new HtmlWebpackPlugin({
          template: './public/index.html',
        }),
      ],
    };

    module.exports = merge(commonConfig, devConfig);

（网页套件. prod.js）

const { merge } = require('webpack-merge');
    const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
    const packageJson = require('../package.json');
    const commonConfig = require('./webpack.common');

    const prodConfig = {
      mode: 'production',
      output: {
        filename: '[name].[contenthash].js',
        publicPath: '/auth/latest/',
      },
      plugins: [
        new ModuleFederationPlugin({
          name: 'auth',
          filename: 'remoteEntry.js',
          exposes: {
            './AuthApp': './src/bootstrap',
          },
          shared: packageJson.dependencies,
        }),
      ],
    };

    module.exports = merge(commonConfig, prodConfig);

新版本的create-react-app使用webpack 5，因此它支持模块联合。我使用react-app-rewired自定义我的webpack配置。因此，我在config-overrides.js中添加了模块联合，如下所示：

/* config-overrides.js */
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const packageJSON = require('./package.json');

module.exports = function override(config, env) {
    //do stuff with the webpack config...
    
    // const publicPath = `http://localhost:${8081}/`;
    if(env === 'development') {
        config.output.publicPath = `http://localhost:${process.env.PORT}/`;
    } else {
        config.output.filename = '[name].[contenthash].js';
        config.output.publicPath = '/';
    }

    config.plugins.push(
        new ModuleFederationPlugin({
            name: 'info',
            filename: 'remoteEntry.js',
            exposes: {
                './InfoApp': './src/bootstrap'
            },
            shared: packageJSON.dependencies
        })
    )
    return config;
}

您可以看到它的代码越来越少，我们仍然在幕后使用create-react-app。