用于从 CDN 导入的代码分割块的 Webpack 设置

Question

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

1. Shell 组件库，任何主机应用程序代码都将使用它来导入 shell 组件。例如

   import Notifications from 'our-shell-lib';
   render(){
       return <Notifications .../>;
   }
   

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

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

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

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

想法？

Answer 1

抱歉这么晚才回复......

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

因此，我们在核心库中导出了一个瘦包装函数，shell 组件可以调用该函数来设置导入核心库的 CDN 的公共路径。