javascript - 多个独立的 webpack 包 : chunks load not working correctly

Question

我有一个由两个独立项目组成的环境，可以描述如下:

• 两个 webpack 包，从两个不同的项目生成:IDE 和 App。
• 它们都是基于 ReactJS 的(尽管我认为这不重要)。
• IDE 基于 webpack 2.x 而应用程序较旧(仍然是 webpack 1.x)
• 没有从一个 bundle 到另一个 bundle 的明确依赖(没有“导入”)
• 两个包都公开了一个要初始化的全局函数。
• IDE 正在使用 webpack CommonsChunkPlugin，但删除它并不能解决问题(如 Webpack config for Code splitting not working for production build 所报告)。

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

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

这个环境正常工作了很长时间。 IDE 基于 react-boilerplate所以它从一开始就使用了 block 和代码拆分。

最近我们也通过使用react-loadable 在应用程序中添加了 JS block 。 .

虽然 IDE 和应用程序在页面上只使用其中一个时都按预期工作，但如果我们同时激活应用程序和 IDE，则不会加载 block :使用的最后一个库是那个这不会加载 block ，而第一个按预期工作。

检查浏览器的网络选项卡，我们看到第二个名为 lib 的没有加载 block 的事件。

显然我们得到了错误: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 构建之外，但不知何故这似乎不是真的。

一个包如何干扰另一个包？为什么不加载 block ？ 有关如何解决此问题的任何建议？

Answer 1

你应该配置output.jsonpFunction每个包的属性。