一文大白话讲清楚webpack进阶——9——ModuleFederation实战

1. 啥是ModuleFederation

• 先看这篇文章，了解ModuleFederation
• 一文大白话讲清楚webpack进阶——8——Module Federation

2. 创建容器应用

• 创建项目并初始化，
• 安装webpack和webpack-cli
• 配置webpack.config.js

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const path = require("path");
 
module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    publicPath: 'auto',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "sharedLib",
      filename: "remoteEntry.js",
      exposes: {
        './MyComponent': './src/MyComponent.js',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^17.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^17.0.0' }
      }
    }),
  ],
};

3. 创建远程应用

• 创建项目并初始化，
• 安装webpack和webpack-cli
• 配置webpack.config.js

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const path = require("path");
 
module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    publicPath: 'auto',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "app",
      remotes: {
        sharedLib: "sharedLib@http://localhost:3000/remoteEntry.js",
      },
      shared: {
        react: { singleton: true, requiredVersion: '^17.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^17.0.0' }
      }
    }),
  ],
};

4. 启动远程应用

• 启动远程应用

5. 使用远程应用的组件

• 在容器应用中的入口文件引用组件

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from 'sharedLib/MyComponent'; // 从远程库中导入组件
import App from './App'; // 本地组件或其他逻辑
 
ReactDOM.render(<React.StrictMode><App /><MyComponent /></React.StrictMode>, document.getElementById('root'));