一援制、什么是聯(lián)邦模塊（Module Federation）
?聯(lián)邦模塊是webpack5提供的一個(gè)新特性锨用，它是通過(guò)webpack原生提供的 ModuleFederationPlugin 插件來(lái)實(shí)現(xiàn)的。聯(lián)邦模塊主要是用來(lái)解決多個(gè)應(yīng)用之間代碼共享的問(wèn)題隘谣，可以讓我們的更加優(yōu)雅的實(shí)現(xiàn)跨應(yīng)用的代碼共享
二、聯(lián)邦模塊的使用
1.動(dòng)態(tài)導(dǎo)入遠(yuǎn)程模塊
step1:? 消費(fèi)通過(guò)加載遠(yuǎn)程js文件【http://localhost:3001/remote-entry.js】，獲取遠(yuǎn)程聯(lián)邦模塊暴露的對(duì)象window[scope]（container）
step2: 初始化共享作用域寻歧。用填入host的共享模塊;
step3: 通過(guò)container.init方法進(jìn)行初始化作用域?qū)ο骾nitScope & 收集依賴到共享作用域?qū)ο髎hareScope
step4: 通過(guò)container.get方法加載遠(yuǎn)程模塊
2.靜態(tài)導(dǎo)入模塊
遠(yuǎn)程組件
本地組件
三掌栅、ModuleFederationPlugin?
原理源碼中 ModuleFederationPlugin 主流程 主要做了三件事：
通過(guò)參數(shù)是否配置 shared 來(lái)判斷是否使用共享依賴 SharePlugin 模塊。
通過(guò)參數(shù)是否配置 exposes 來(lái)判斷是否使用公開 ContainerPlugin 模塊码泛。
通過(guò)參數(shù)是否配置 remotes 來(lái)判斷是否使用 ContainerReferencePlugin 引用模塊猾封。
sharePlugin
ContainerPlugin
__webpack_require__.I(name, initScope)方法
這段代碼所做的就是根據(jù)配置項(xiàng)將模塊生成內(nèi)部對(duì)應(yīng)的 modules，定義了一個(gè) scope 去存儲(chǔ)所有的 module噪珊，然后注冊(cè)了共享模塊等操作晌缘。全部掛載在__webpack_require__上，這樣處理以方便后續(xù) require 的方式引入進(jìn)來(lái)
生成共享模塊對(duì)象
ContainerReferencePlugin
該插件先將遠(yuǎn)程模塊的引用存入__webpack_modules__里面
使用遠(yuǎn)程模塊的文件痢站，會(huì)被webpack5新增的方法_webpack_require__.e導(dǎo)入【src_bootstrap_js】磷箕，這個(gè)方法包含三塊：
1.加載共享模塊：__webpack_require__.f.overridables = (chunkId, promises) => {};
2.加載遠(yuǎn)程聯(lián)邦模塊：__webpack_require__.f.remotes = (chunkId, promises) => {};
3.加載js：__webpack_require__.f.j = (chunkId, promises) => {};
overridables
其中__webpack_require__.Overrides在A的產(chǎn)物沖，用B產(chǎn)物提供的override方法override方法填充的共享模塊列表
step1: B產(chǎn)物中定義override方法
step2: A產(chǎn)物中調(diào)用override方法進(jìn)行本地共享模塊填充
remotes
四阵难、流程圖
