溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹關于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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
