webpack5 模块联邦

//在webpack配置中以插件的形式引入
  const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
  plugins: [
    new ModuleFederationPlugin({
      name: "app_one_remote",//当前项目名称,需全局唯一
      remotes: {
        app_two_remote: //引用远程runtime状态的项目名称和地址映射到当前项目
          "app_two_remote@http://192.168.9.35:3001/remoteEntry.js",
      },
      shared: ["react", "react-dom"],//是非常重要的参数，制定了这个参数，可以让远程加载的模块对应依赖改为使用本地项目的 React 或 ReactDOM。
    }),
  ],

//项目二webpack 插件选项配置
  plugins: [
    new ModuleFederationPlugin({
      name: "app_two_remote",//当前项目名称,需全局唯一
      filename: "remoteEntry.js",//整个远程打包文件
      exposes: {
        "./Search": "./src/Search",//导出的Search模块，只有在此申明的模块才可以作为远程依赖被使用
      },
      shared: ["react", "react-dom"],
    }),
  ],

import("./test"); //首页入口文件用动态import方式方便webpack编译