webpack5 聯邦模組介紹詳解
本文主要介紹webpack 5 的新特性之一 "module federation"(聯邦模組)，涉及聯邦模組特性、使用方法、適用範圍。
特性
webpack 5引入聯邦模式是為了 更好的共享程式碼 。 在此之前，我們共享程式碼一般用npm發包來解決。 npm發包需要經歷構建，釋出，引用三階段，而聯邦模組可以 直接引用其他應用程式碼,實現熱插拔效果。對比npm的方式更加簡潔、快速、方便。
使用方法
- 引入遠端js
- webpack配置
- 模組使用
引入遠端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",name: "app2" },filename: "remoteEntry.js",exposes: {
"./Button": "./src/Button",})
],
可以看到app1和app2的配置基本相同，除了app2 多了filename和exposes以外。
引數解釋
- name 應用名，全域性唯一，不可衝突。
- library 。UMD標準匯出，和name保持一致即可。
- remotes 宣告需要引用的遠端應用。如上圖app1配置了需要的遠端應用app2.
- filename 遠端應用時被其他應用引入的js檔名稱。對應上面的 remoteEntry.js
- exposes 遠端應用暴露出的模組名。
- shared 依賴的包。
- 如果配置了這個屬性。webpack在載入的時候會先判斷本地應用是否存在對應的包，如果不存在，則載入遠端應用的依賴包。
- 以app2來說，因為它是一個遠端應用，配置了["react","react-dom"] ，而它被app1所消費，所以webpack會先查詢app1是否存在這兩個包，如果不存在就使用app2自帶包。 app1裡面同樣申明瞭這兩個引數，因為app1是本地應用，所以會直接用app1的依賴。
模組使用
對於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地址
到此這篇關於webpack5 聯邦模組介紹詳解的文章就介紹到這了,更多相關webpack5 聯邦模組 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！