多個獨立的 webpack 包：塊加載無法正常工作

Question

我有一個由兩個獨立項目組成的環境，可以描述如下：

• 兩個 webpack 包，從兩個不同的項目生成： IDE和App 。
• 它們都基於 ReactJS（雖然我認為這並不重要）。
• IDE 基於 webpack 2.x，而應用程序較舊（仍然是 webpack 1.x）
• 從一個包到另一個包沒有顯式依賴（沒有“導入”）
• 兩個包都公開了一個要初始化的全局函數。
• IDE 正在使用 webpack CommonsChunkPlugin，但刪除它並不能解決問題（如Webpack config for Code splitting not working for production build所報告的那樣）。

IDE 和應用程序都必須在 3rd 方 JavaScript 環境中使用。 它會在需要時調用window.initIDE和window.initApp 。 沒有顯式依賴，因為如果另一個缺失，IDE 和 App 仍然必須工作，所以頁面中包含的 JS 是這樣的：

<script src=".../app.js" />
<script src=".../ide.js" />

這種環境正常工作了很長時間。 IDE 基於react-boilerplate，因此它從一開始就使用了塊和代碼拆分。

最近我們使用react-loadable在 App 中添加了 JS 塊。

當頁面上只使用其中一個時，IDE 和 App 都按預期工作，但如果我們同時激活 App 和 IDE，則不會加載塊：使用的最后一個庫是不會加載塊的庫，而第一個則工作正如預期的那樣。

檢查瀏覽器的網絡選項卡，我們根本看不到加載第二個稱為 lib 的塊的活動。

顯然我們得到了錯誤：IDE 和 App 的回溯是相似的：

Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
    at __webpack_require__

檢查__webpack_require__ ：

modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));

雖然modules是所有可用modules的數組，但沒有modules[moduleId]因為moduleId指的是無效索引（可能是因為它尚未加載......但為什么呢？）

我一直認為 webpack 內部實現並沒有在包構建之外全局公開，但不知何故這似乎並不正確。

一個捆綁如何干擾另一個？ 為什么塊沒有加載？ 有關如何解決此問題的任何建議？

Answer 1

您應該為每個包配置output.jsonpFunction屬性。