从CDN导入的代码拆分块的Webpack设置

Question

我们正在研究React组件库。某些组件需要更新，而无需重新部署主机应用程序代码。这非常类似于谷歌地图库，其中客户端API是一个小的shell代码，它在运行时导入实际的地图代码，从而允许热更新，而无需任何主机停机。 所以我们计划将这个库的输出分成两部分 -

1. Shell组件库，任何主机应用程序代码将用于从中导入shell组件。例如。

   .combo-box .list-cell {
       -fx-font-size: xxxx;
   }
   

2. 核心组件库，我们计划在我们的服务器上托管。我们将继续使用新的修复程序和功能对其进行更新。

在上面的示例中，Notifications组件将从我们的服务器下载NotificationsCore组件并在内部安装。

我们已经能够导出单个shell组件，并使用scriptjs所述的基于here的技术在运行时正确下载相应的核心组件。

然而，当核心组件使用动态导入时会中断，这会导致代码分裂。所有核心组件文件都可以在远程服务器上获得，但是我们还没有成功地将它们打包成具有动态导入的核心组件可以以服务器URL无关的方式从远程服务器加载其拆分块的方式。 我们不想对核心软件包中的公共路径进行硬编码。我们可以在运行时将服务器路径传递给核心组件，以帮助它找到动态导入，但还没有找到方法。

思考？

Answer 1

抱歉，回复时间太晚了...

我们能够使用__webpack_public_path__解决此问题。在发布此问题时，关于这个简洁的小功能的文档很少。它允许您设置webpack填充程序（包含在每个webpack捆绑包中）用来解析相对导入的公共路径。

因此，我们在核心库中导出了一个瘦包装器函数，外壳程序组件可以调用该函数来设置从其导入核心库的任何CDN的公共路径。