webpack5 module federation 模块联邦webpack5 module federation 模块

webpack5 module federation 模块联邦

简单实现微服务项目

创建 react 项目

npx create-react-app '项目名'

<!-- 消费方-主服务 -->
npx create-react-app container
<!-- 提供方-子服务 -->
npx create-react-app micro-front-end-1
npx create-react-app micro-front-end-2

改造提供方-子服务

安装依赖

yarn add webpack webpack-cli webpack-server html-webpack-plugin webpack-dev-server -D

创建配置文件修改配置

创建 webpack.config.js

module.exports = {
  mode: "development",
  //   服务信息
  devServer: {
    port: 8081,
  },
  // react项目需要配置
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: [
            "@babel/preset-env", // 将高级语法转译至 ES5
            "@babel/preset-react", // 编译react语法至 ES5
          ],
        },
      },
    ],
  },
  //   插件
  plugins: [
    // 项目入口文件
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
    // 暴露服务，提供访问文件
    new ModuleFederationPlugin({
      // 服务名称
      name: "microFrontEnd1",
      // 其他服务访问的文件名
      filename: "remoteEntry.js",
      // 暴露的文件
      exposes: {
        "./MicroFrontEnd1Index": "./src/index",
      },
    }),
  ],
};

package.json 加入 script

"scripts":{
    "webpack":'webpack serve'
}

改造主服务

安装依赖

yarn add webpack webpack-cli webpack-server html-webpack-plugin -D

创建配置文件修改配置

创建 webpack.config.js

module.exports = {
  mode: "development",
  //   服务信息
  devServer: {
    port: 8081,
  },
  //   插件
  plugins: [
    // 项目入口文件
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
    // 引入子服务
    new ModuleFederationPlugin({
      // 当前服务名
      name: "container",
      //   子服务
      remotes: {
        // 子服务配置的[name]:[name]@[子服务完整访问地址][filename].js
        microFrontEnd1: "microFrontEnd1@http://localhost:8081/remoteEntry.js",
      },
    }),
  ],
};

package.json 加入 script

"scripts":{
    "webpack":'webpack serve'
}

引入子服务

import "microFrontEnd1/MicroFrontEnd1Index";

在主服务增加子服务显示视图，定义 id，与子服务加载内容的 id 保持一致

<!-- 主服务配置挂载子服务id -->
<html lang="en">
  <head> </head>
  <body>
    <div id="root"></div>
    <div id="react-microfrontend-2"></div>
  </body>
</html>

// 子服务加载内容视图
const root = ReactDOM.createRoot(
  document.getElementById("react-microfrontend-2")
);