javascript - 用于从 CDN 导入的代码拆分块的 Webpack 设置

Question

我们正在开发 React 组件库。一些组件需要更新而无需重新部署主机应用程序代码。这很像谷歌地图库，其中客户端 API 是一个小的 shell 代码，它在运行时导入实际的 map 代码，从而允许在主机不停机的情况下进行热更新。所以我们计划将这个库的输出分成两部分 -

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

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

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

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

我们已经能够导出单个外壳组件，并在运行时正确下载相应的核心组件，使用 scriptjs基础技术描述 here .

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

想法？

Answer 1

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

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

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