使用模块联合反应微前端

Question

我考虑使用 Webpack 5 Module Federation 创建微前端，如 https://indepth.dev/posts/1173/webpack-5-module-federation-a-game-changer-in-javascript-architecture 所述。

有人使用过 Webpack 5 模块联合吗？如果是，请您分享您的经验吗？

我可以将它与 Create a New React App 工具一起使用吗？当我使用 Create a New React App 创建应用时，我看不到任何 webpack.config.js 文件。

Answer 1

有两个不同的问题，如果您问如何在 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;
}

Answer 2

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

Answer 3

这是 React 与 Module Federation 5 中微前端的示例 POC https://github.com/sarat9/microfrontends

在共享环境中使用插件“ModuleFederationPlugin”公开和导入模块。

Answer 4

似乎唯一可行的方法是“弹出”CRA。但问题是它现在在 webpack 4 上，并且有很多突破性的变化使它可以与版本 5 一起使用。我自己也在苦苦挣扎。订阅。 在“弹出”并通过“迁移”从 4 到 5 之后，似乎主要问题在于路径。

Answer 5

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

• 授权
• 容器
• 仪表板
• 营销

你必须自己编写配置文件。

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'],
              },
            },
          },
        ],
      },
    };

(webpack.dev.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);

(webpack.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);