这篇文章主要介绍关于webpack5联邦模块的简介，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
特性
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>
<h2>Basic Host-Remote</h2>
<h3>App 1</h3>
<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地址
以上是关于webpack5联邦模块的简介的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
