reactjs - Webpack Module federation 插件，用于在 Angular 中做出反应

Question

我正在使用Webpack 5，我想将angular项目组件添加到react项目中，但它不起作用。我的代码如下。

这个有角度的 webpack 代码如下

      const HtmlWebPackPlugin = require("html-webpack-plugin");
      const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
    
      module.exports = {
      mode: "development",
      entry: {
        main: "./src/main.ts",
      },
      output: {
        publicPath: "http://localhost:8083/",
        uniqueName: "content",
      },
      resolve: {
        extensions: [".ts", ".jsx", ".js", ".json"],
      },
    
      devServer: {
        port: 8083,
      },
    
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            loader: "ts-loader",
          },
    
          {
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
          },
          {
            test: /\.(js)$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader",
            },
          },
        ],
      },
      plugins: [
        new ModuleFederationPlugin({
          name: "content",
          filename: "remoteEntry.js",
          exposes: {
            "./content": "./src/app/app.module.ts",
          },
          library: { type: "var", name: "content" },
          shared: {
            "@angular/core": { eager: true, singleton: true },
            "@angular/common": { eager: true, singleton: true },
            "@angular/router": { eager: true, singleton: true },
          },
        }),
        new HtmlWebPackPlugin({
         
          template: "./src/app/app.component.html",
        }),
      ],
    };

   

这个反应 webpack 代码如下

    const HtmlWebPackPlugin = require("html-webpack-plugin");
    const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
    module.exports = {
      mode: "development",
      devServer: {
        port: 8002,
      },
    
      plugins: [
        new ModuleFederationPlugin({
          name: "skeleton",
          filename: "remoteEntry.js",
          
          remotes: {
            header: "header@http://localhost:8081/remoteEntry.js",
            content: "content@http://localhost:8083/remoteEntry.js",
            starter:'starter@http://localhost:8089/remoteEntry.js',
          },
        }),
        new HtmlWebPackPlugin({
          template: "./public/index.html",
        }),
      ],
      module: {
        rules: [
          {
            test: /\.js?$/,
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env", "@babel/preset-react"],
            },
          },
        ],
      },
    };

这样，我导入但组件不来。

import React, { lazy, Suspense, useEffect } from "react";
import mountHeader from "starter/mountHeader"; 
import Content from "content/content";

const Header = lazy(() => import("header/App")); 

const App = () => {
  return (
    <div>
      <div>
        <Suspense fallback="Loading Button">
          <Header />
        </Suspense>
      </div>
      {Content}
      {mountHeader("#menu")}
    </div>
  );
};

export default App;