快捷導(dǎo)航

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

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

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

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

特性

webpack 5引入聯(lián)邦模式是為了更好的共享代碼。在此之前，我們共享代碼一般用npm發(fā)包來解決。 npm發(fā)包需要經(jīng)歷構(gòu)建，發(fā)布，引用三階段，而聯(lián)邦模塊可以直接引用其他應(yīng)用代碼 ,實(shí)現(xiàn)熱插拔效果。對(duì)比npm的方式更加簡(jiǎn)潔、快速、方便。

使用方法

引入遠(yuǎn)程js
webpack配置
模塊使用

引入遠(yuǎn)程JS

假設(shè)我們有app1，app2兩個(gè)應(yīng)用，端口分別為3001，3002。 app1應(yīng)用要想引用app2里面的js，直接用script標(biāo)簽即可。

例如app1應(yīng)用里面index.html引入app2應(yīng)用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"],
  }),
 ],
};

對(duì)于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 應(yīng)用名，全局唯一，不可沖突。
library 。UMD標(biāo)準(zhǔn)導(dǎo)出，和name保持一致即可。
remotes 聲明需要引用的遠(yuǎn)程應(yīng)用。如上圖app1配置了需要的遠(yuǎn)程應(yīng)用app2.
filename 遠(yuǎn)程應(yīng)用時(shí)被其他應(yīng)用引入的js文件名稱。對(duì)應(yīng)上面的 remoteEntry.js
exposes 遠(yuǎn)程應(yīng)用暴露出的模塊名。
shared 依賴的包。
- 如果配置了這個(gè)屬性。webpack在加載的時(shí)候會(huì)先判斷本地應(yīng)用是否存在對(duì)應(yīng)的包，如果不存在，則加載遠(yuǎn)程應(yīng)用的依賴包。
- 以app2來說，因?yàn)樗且粋€(gè)遠(yuǎn)程應(yīng)用，配置了["react", "react-dom"] ，而它被app1所消費(fèi)，所以webpack會(huì)先查找app1是否存在這兩個(gè)包，如果不存在就使用app2自帶包。 app1里面同樣申明了這兩個(gè)參數(shù)，因?yàn)閍pp1是本地應(yīng)用，所以會(huì)直接用app1的依賴。

模塊使用

對(duì)于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('遠(yuǎn)程應(yīng)用名/暴露的模塊名'），對(duì)應(yīng)webpack配置里面的name和expose。使用方式和引入一個(gè)普通異步組件無差別。

適用范圍

由于share這個(gè)屬性的存在，所以本地應(yīng)用和遠(yuǎn)程應(yīng)用的技術(shù)棧和版本必須兼容，統(tǒng)一用同一套。比如js用react，css用sass等。

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

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