關于webpack5聯(lián)邦模塊的簡介

發(fā)布時間：2020-07-09 11:00:21 來源：億速云閱讀：330 作者：清晨欄目：開發(fā)技術

這篇文章主要介紹關于webpack5聯(lián)邦模塊的簡介，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

特性

webpack 5引入聯(lián)邦模式是為了更好的共享代碼。在此之前，我們共享代碼一般用npm發(fā)包來解決。 npm發(fā)包需要經歷構建，發(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>
  <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這個屬性的存在，所以本地應用和遠程應用的技術棧和版本必須兼容，統(tǒng)一用同一套。比如js用react，css用sass等。

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

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

關于webpack5聯(lián)邦模塊的簡介

例子的 github地址

以上是關于webpack5聯(lián)邦模塊的簡介的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

關于webpack5聯(lián)邦模塊的簡介

猜你喜歡

最新資訊

相關推薦

相關標簽