webpack5 聯(lián)邦模塊介紹詳解

更新時間：2020年07月08日 08:28:21 作者：章偉東

這篇文章主要介紹了webpack 5 聯(lián)邦模塊介紹，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

本文主要介紹webpack 5 的新特性之一 "module federation"(聯(lián)邦模塊)，涉及聯(lián)邦模塊特性、使用方法、適用范圍。

特性

webpack 5引入聯(lián)邦模式是為了更好的共享代碼。在此之前，我們共享代碼一般用npm發(fā)包來解決。 npm發(fā)包需要經(jīng)歷構建，發(fā)布，引用三階段，而聯(lián)邦模塊可以直接引用其他應用代碼 ,實現(xiàn)熱插拔效果。對比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",
   library: { type: "var", name: "app2" },
   filename: "remoteEntry.js",
   exposes: {
    "./Button": "./src/Button",
   },
   shared: ["react", "react-dom"],
  })
 ],

可以看到app1和app2的配置基本相同，除了app2 多了filename和exposes以外。

參數(shù)解釋

name 應用名，全局唯一，不可沖突。
library 。UMD標準導出，和name保持一致即可。
remotes 聲明需要引用的遠程應用。如上圖app1配置了需要的遠程應用app2.
filename 遠程應用時被其他應用引入的js文件名稱。對應上面的 remoteEntry.js
exposes 遠程應用暴露出的模塊名。
shared 依賴的包。
- 如果配置了這個屬性。webpack在加載的時候會先判斷本地應用是否存在對應的包，如果不存在，則加載遠程應用的依賴包。
- 以app2來說，因為它是一個遠程應用，配置了["react", "react-dom"] ，而它被app1所消費，所以webpack會先查找app1是否存在這兩個包，如果不存在就使用app2自帶包。 app1里面同樣申明了這兩個參數(shù)，因為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這個屬性的存在，所以本地應用和遠程應用的技術棧和版本必須兼容，統(tǒng)一用同一套。比如js用react，css用sass等。

聯(lián)邦模塊和微前端的關系：因為expose這個屬性即可以暴露單個組件，也可以把整個應用暴露出去。同時由于share屬性存在，技術棧必須一致。所以加上路由，可以用來實現(xiàn)single-spa這種模式的微前端。

使用場景：新建專門的組件應用服務來管理所有組件和應用，其他業(yè)務層只需要根據(jù)自己業(yè)務所需載入對應的組件和功能模塊即可。模塊管理統(tǒng)一管理，代碼質量高，搭建速度快。特別適用矩陣app，或者可視化頁面搭建等場景。

例子的 github地址

到此這篇關于webpack5 聯(lián)邦模塊介紹詳解的文章就介紹到這了,更多相關webpack5 聯(lián)邦模塊內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Js實現(xiàn)京東無延遲菜單效果實例(demo)
本篇文章主要介紹了Js實現(xiàn)京東無延遲菜單效果實例(demo) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
基于JavaScript實現(xiàn)年份數(shù)字拼圖效果
時光荏苒，2022年又要收尾了，公司的年會是不是都安排上了？前幾天看到一個年會抽獎系統(tǒng)，功能十分的強大，其中有一個年份數(shù)字的拼圖效果深深的吸引了哥，決定用JS實現(xiàn)一下該效果，需要的可以參考一下
2022-12-12
JavaScript?邏輯或?||?的妙用及相關知識普及
本文給大家介紹了JavaScript中的邏輯或運算符||的用法,包括其基本概念、真值和假值、常見應用以及與其他邏輯運算符的對比,感興趣的朋友跟隨小編一起看看吧
2024-12-12
WordPress中鼠標懸停顯示和隱藏評論及引用按鈕的實現(xiàn)
這篇文章主要介紹了WordPress中鼠標懸停顯示和隱藏評論及引用按鈕的實現(xiàn),順帶顯示和隱藏評論者信息的實現(xiàn)方法,非常實用,需要的朋友可以參考下
2016-01-01
深入淺出webpack之externals的使用
這篇文章主要介紹了深入淺出webpack之externals的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
JS實現(xiàn)左側菜單工具欄
這篇文章主要為大家詳細介紹了JS實現(xiàn)左側菜單工具欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
前端項目部署后如何提示用戶版本更新詳解
這篇文章主要給大家介紹了關于前端項目部署后如何提示用戶版本更新的相關資料,文中通過代碼介紹的非常詳細,對大家的工作或者學習具有一定的參考借鑒價值,需要的朋友可以參考下
2024-03-03
js通過元素class名字獲取元素集合的具體實現(xiàn)
獲取元素集合的方法有很多，接下來為大家介紹喜愛使用js通過元素class名字獲取元素集合的方法
2014-01-01
獲取JavaScript用戶自定義類的類名稱的代碼
獲取JavaScript用戶自定義類的類名稱的代碼...
2007-03-03
BooStrap對導航條的改造實踐小結
這篇文章主要介紹了BooStrap對導航條的改造實踐小結的相關資料,本文分步驟介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下
2016-09-09