本文主要介绍webpack 5 的新特性之一 "module federation"(联邦模块)，涉及联邦模块特性、使用方法、适用范围。
特性
webpack 5引入联邦模式是为了 更好的共享代码 。 在此之前，我们共享代码一般用npm发包来解决。 npm发包需要经历构建，发布，引用三阶段，而联邦模块可以 直接引用其他应用代码 ,实现热插拔效果。对比npm的方式更加简洁、快速、方便。
使用方法
引入远程JS
假设我们有app1，app2两个应用，端口分别为3001，3002。 app1应用要想引用app2里面的js，直接用script标签即可。
例如app1应用里面index.html引入app2应用remoteEntry.js
<head> <script src="http://localhost:3002/remoteEntry.js"></script> </head>
webpack配置
app1的webpack配置：
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
//....
plugins: [
new ModuleFederationPlugin({
name: "app1",
library: { type: "var", name: "app1" },
remotes: {
app2: "app2",
},
shared: ["react", "react-dom"],
}),
],
};
对于app2的webpack配置如下
plugins: [
new ModuleFederationPlugin({
name: "app2",
library: { type: "var", name: "app2" },
filename: "remoteEntry.js",
exposes: {
"./Button": "./src/Button",
},
shared: ["react", "react-dom"],
})
],
可以看到app1和app2的配置基本相同，除了app2 多了filename和exposes以外。
参数解释
模块使用
对于app1/App.js代码使用app2的组件，代码如下：
import React from "react";
const RemoteButton = React.lazy(() => import("app2/Button"));
const App = () => (
<div>
<h1>Basic Host-Remote</h1>
<h2>App 1</h2>
<React.Suspense fallback="Loading Button">
<RemoteButton />
</React.Suspense>
</div>
);
export default App;
具体这一行
const RemoteButton = React.lazy(() => import("app2/Button"));
使用方式为：import('远程应用名/暴露的模块名'），对应webpack配置里面的name和expose。使用方式和引入一个普通异步组件无差别。
适用范围
由于share这个属性的存在，所以本地应用和远程应用的技术栈和版本必须兼容，统一用同一套。比如js用react，css用sass等。
联邦模块和微前端的关系：因为expose这个属性即可以暴露单个组件，也可以把整个应用暴露出去。同时由于share属性存在，技术栈必须一致。所以加上路由，可以用来实现single-spa这种模式的微前端。
使用场景：新建专门的组件应用服务来管理所有组件和应用，其他业务层只需要根据自己业务所需载入对应的组件和功能模块即可。模块管理统一管理，代码质量高，搭建速度快。特别适用矩阵app，或者可视化页面搭建等场景。
例子的 github地址
