模块联邦实现微前端

1、简介

• 实现微前端有single-spa、qiankun

• 现在有新的方式，借助webpack5新特性，模块联邦实现微前端

2、使用流程介绍

2.1 首先有一个host项目

ModuleFederationPlugin 配置介绍

webpack配置

let path = require("path");
let webpack = require("webpack");
let HtmlWebpackPlugin = require("html-webpack-plugin");
+ const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
    mode: "development",
    devtool:false,
    entry: "./src/index.js",
    output: {
        publicPath: "http://localhost:8081/",
    },
    devServer: {
        port: 8081
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-react"]
                    },
                },
                exclude: /node_modules/,
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./public/index.html'
        }),
+         new ModuleFederationPlugin({
+            name:'hostVar', // 模块名 被外部使用时要用到
+             filename:'remoteEntry.js', // 构建输出文件名
+             remotes:{
+                 remote:'remoteVar@http://localhost:8080/remoteEntry.js' // 引入远程文件的地址
+             },
+             exposes:{
+                // 提供资源别名和路径关系
+                 './Slides':'./src/Slides'
+             },
+             shared:['react','react-dom']     // 共享第三方包
+         })
    ]
}

remotes 定义：

• key是remote 内部使用时是remote/xxx
• value：远程项目的的name@构建的地址 即remoteVar@http://localhost:8080/remoteEntry.js

host项目使用remote项目组件 方式如下
使用remote/xxx暴露的组件就行了

import React from 'react';
import Slides from './Slides';
const RemoteNewList = React.lazy(()=>import('remote/NewsList'));
const App = ()=>(
    <div>
        <h3>本地组件Slides</h3>
        <Slides></Slides>
        <hr/>
        <h3>远程组件NewsList</h3>
        <React.Suspense fallback="Loading NewsList">
            <RemoteNewList/>
        </React.Suspense>
    </div>
)
export default App;

• host项目也可以暴露组件给remote使用

// src/Slides创建
import React from 'react';
const Slides = ()=>(
    <div>
      Slides
    </div>
)
export default Slides;

2.2 新建remote项目

// webpack配置文件
let path = require("path");
let webpack = require("webpack");
let HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
    mode: "development",
    devtool:false,
    entry: "./src/index.js",
    output: {
        publicPath: "http://localhost:8080/",
    },
    devServer: {
        port: 8080
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-react"]
                    },
                },
                exclude: /node_modules/,
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./public/index.html'
        }),
        new ModuleFederationPlugin({
            name:'remoteVar',// remote向外暴露的全局变量名
            filename:'remoteEntry.js',//构建出来的文件名
            exposes:{
                './NewsList':'./src/NewsList'
            },
            remotes:{
                host:'hostVar@http://localhost:8081/remoteEntry.js'
            },
            shared:['react','react-dom']    
        })
    ]
}

remote项目：暴露出NewsList给外部使用
那么新建一个NewsList组件
src目录下

NewsList.js

import React from 'react';
const NewsList = ()=>(
    <div>
      NewsList
    </div>
)
export default NewsList;

App.js

• 也使用了外部host组件 host/Slides

import React from 'react';
import NewsList from './NewsList';
const RemoteSlides = React.lazy(()=>import('host/Slides'));
const App = ()=>(
    <div>
        <h3>本地组件NewsList</h3>
        <NewsList/>
        <hr/>
        <h3>远程组件NewsList</h3>
        <React.Suspense fallback="Loading RemoteSlides">
            <RemoteSlides/>
        </React.Suspense>
    </div>
)
export default App;

• host项目截图：8081端口
  

• remote项目截图： 8080端口