用于从 CDN 导入的代码拆分块的 Webpack 设置
Webpack setup for code-split chunks imported from CDN
我们正在开发 React 组件库。一些组件需要更新而无需重新部署主机应用程序代码。这很像 Google 地图库，其中客户端 API 是一小段 shell 代码，它在 运行 时导入实际的地图代码，从而允许热更新而无需任何主机停机时间。
所以我们计划将这个库的输出分成两部分 -
Shell 组件库，任何主机应用程序代码都将使用它从中导入 shell 组件。例如。
import Notifications from 'our-shell-lib';
render(){
return <Notifications .../>;
}
- 我们计划在我们的服务器上托管的核心组件库。我们将继续使用新的修复程序和功能对其进行更新。
在上面的例子中，Notifications 组件将从我们的服务器下载 NotificationsCore 组件并在内部挂载它。
我们已经能够导出单个 shell 组件，它使用 scriptjs based techniques described here.
在 运行 时正确下载相应的核心组件
然而，当核心组件使用动态导入时，这会中断，这会导致代码拆分。所有核心组件文件都在远程服务器上可用，但我们还没有成功地以一种方式打包它们，使具有动态导入的核心组件可以从服务器中的远程服务器加载其拆分块 URL不可知论时尚。 我们不想在核心包中硬编码 publicpath。我们可以在 运行 时将服务器路径传递给核心组件，以帮助它找到动态导入，但还没有找到这样做的方法。
想法？
抱歉这么晚才回复....
我们使用 __webpack_public_path__ 解决了这个问题。在发布这个问题时，关于这个简洁的小功能的文档很少。它允许您设置 webpack shim（包含在每个 webpack 包中）使用的 public 路径来解析相对导入。
所以我们在核心库中导出了一个瘦包装函数，shell 组件可以调用它来设置从他们导入核心库的任何 CDN 的 public 路径。
我们正在开发 React 组件库。一些组件需要更新而无需重新部署主机应用程序代码。这很像 Google 地图库，其中客户端 API 是一小段 shell 代码，它在 运行 时导入实际的地图代码，从而允许热更新而无需任何主机停机时间。 所以我们计划将这个库的输出分成两部分 -
Shell 组件库，任何主机应用程序代码都将使用它从中导入 shell 组件。例如。
import Notifications from 'our-shell-lib'; render(){ return <Notifications .../>; }- 我们计划在我们的服务器上托管的核心组件库。我们将继续使用新的修复程序和功能对其进行更新。
在上面的例子中，Notifications 组件将从我们的服务器下载 NotificationsCore 组件并在内部挂载它。
我们已经能够导出单个 shell 组件，它使用 scriptjs based techniques described here.
在 运行 时正确下载相应的核心组件然而，当核心组件使用动态导入时，这会中断，这会导致代码拆分。所有核心组件文件都在远程服务器上可用，但我们还没有成功地以一种方式打包它们，使具有动态导入的核心组件可以从服务器中的远程服务器加载其拆分块 URL不可知论时尚。 我们不想在核心包中硬编码 publicpath。我们可以在 运行 时将服务器路径传递给核心组件，以帮助它找到动态导入，但还没有找到这样做的方法。
想法？
抱歉这么晚才回复....
我们使用 __webpack_public_path__ 解决了这个问题。在发布这个问题时，关于这个简洁的小功能的文档很少。它允许您设置 webpack shim（包含在每个 webpack 包中）使用的 public 路径来解析相对导入。
所以我们在核心库中导出了一个瘦包装函数，shell 组件可以调用它来设置从他们导入核心库的任何 CDN 的 public 路径。