多个独立的 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属性。