我正在嘗試使用 Webpack 的聯合模塊插件匯入兩個模塊，設定如下：
new ModuleFederationPlugin({
name: "module-a",
filename: "remoteEntry.js",
library: { type: "var", name: "module_a" },
exposes: {
"./lib": "./bootstrap",
},
})
和 module-b 的幾乎相同的設定。
但是，由于兩個聯合模塊在其根模塊（例如bootstrap.ts）中使用相同的檔案名，因此都被分配了相同的 chunkId（“626”，這只是'./node_modules/ts-loader/index.js!./bootstrap.ts'使用numberHash函式的哈希）
在正常的 webpack 構建中，每個塊的檔案路徑都是唯一的，但由于我有多個公開的聯合模塊./bootstrap.ts，因此每個模塊都獲得相同的塊 id（在本例中為 656）。這會導致運行時中的 id 沖突，因為兩個聯合模塊都請求相同的塊 ID，因此存在競爭條件，其中要請求的 id 為 626 的第一個塊被兩個聯合模塊使用。
我嘗試設定outputs.chunkFilename: "module-a-[id].js"（同樣為module-b），但這似乎并沒有改變 chunkId，并且在網路活動中，我可以看到只有兩個塊中的一個被加載并（錯誤地）匯入到兩個聯合模塊中。例如，在網路選項卡中，我可以看到其中之一module-a-656.js或被module-b-656.js加載——但永遠不會同時加載，并且加載的任何檔案的內容最終都被匯入到兩個模塊中。
閱讀代碼，看起來塊 ID 是由DeterministicChunkIdsPlugin設定的，它沒有公開 hashSalt 選項或使用options.hashSalt（即為了用聯合模塊的名稱對 id 進行加鹽），所以沒有t 似乎是一種更改散列函式以防止 id 沖突的方法。
有什么辦法可以防止這種 id 與聯合模塊的沖突？（除了手動檢查您的應用程式可能想要匯入的任何聯合模塊都不會公開相同的檔案名）
uj5u.com熱心網友回復：
我所詢問的競爭條件是由于（在撰寫本文時）未記錄的功能，即聯合模塊插件使用package.json檔案中的名稱欄位來決議來自聯合模塊的資產。否則，來自不同聯合模塊的具有公共路徑（例如src/index.js）的資產從 webpack 的角度來看會變得模棱兩可，并創建一個取決于網路請求完成順序的競爭條件。
在我對該插件的測驗中，我將一個模塊復制到另一個檔案夾中，對副本進行了小幅更改，并嘗試將兩個副本作為聯合模塊匯入——結果發現remoteEntry.js首先完成的模塊的網路請求的內容被注入頁面上的兩個模塊。
這是一個 repo，說明了使用聯合模塊的這個特殊“陷阱”。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/425756.html
標籤：网页包
上一篇：什么是“.js.map”檔案？
下一篇：當Javascript創建相對影像URL時，Webpack不會保存影像，但當HTML中存在相同的相對影像URL時會保存它們