多个独立的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所述）。

必须在第三方JavaScript环境中使用IDE和应用程序。它会在需要时调用window.initIDE和window.initApp。 没有明确的依赖关系，因为如果缺少另一个，IDE和App仍然可以工作，因此页面中的JS包含类似于：

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

这种环境长时间正常工作。 IDE基于react-boilerplate，因此它从头开始使用块和代码分割。

最近我们使用react-loadable在应用程序中添加了JS块。

虽然IDE和App在页面上只使用其中一个时按预期工作，但如果我们同时激活App和IDE，则不会加载块：使用的 last 库是一个它不会加载块，而第一个按预期工作。

检查浏览器的网络选项卡，我们看到第二个名为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[moduleId]，因为moduleId引用了无效索引（可能是因为它尚未加载......但为什么？）

我一直认为webpack内部实现并没有在bundle build之外全局暴露，但不知怎的，这似乎不正确。

捆绑怎么干扰另一个？为什么没有加载块？ 关于如何解决这个问题的任何建议？

Answer 1

您应为每个捆绑包配置output.jsonpFunction属性。