如何配置 Webpack 从运行时确定的 CDN 主机加载 index.html 以外的资源？

Question

我们有一个应用程序，其中

index.html

由 NGINX 提供服务，但我们希望所有其他资产都从 CDN 加载。我们的 CI 管道将我们的应用程序部署到暂存环境，然后再部署到生产环境。每个环境都有自己的 CDN（例如，暂存使用

staging.examplecdn.com

，生产使用

examplecdn.com

）。

似乎Webpack 的

publicPath

配置选项通常用于定义CDN 主机，但它要求我们在构建时知道CDN 主机。这将需要我们在部署过程中两次构建我们的应用程序——一次用于暂存，一次用于生产。我们想避免这种情况，因为 (1) 我们不想放慢我们的 CI 管道，并且 (2) 确保我们部署到生产中的内容主要是我们在暂存中测试的内容似乎更安全。

Webpack 文档的下一个选项是设置

__webpack_public_path__

，但这必须在应用程序的入口点内设置。这并没有真正解决我们的问题，因为我们希望我们的

index.html

也从 CDN 加载主应用程序块。换句话说，Webpack 注入 HTML 文件（使用 HTMLWebpackPlugin）的

script

标签需要合并适当的 CDN 主机。

我们最好的选择是什么？感谢您的任何建议！

Answer 1

有趣。我明白你关于一次构建二进制文件的观点，但逻辑上你需要使用此体系结构的管道的每个阶段使用不同的 index.html 文件。如果把 index.html 文件也部署到 CDN 上就更简单了

在您的设置中，我的目标是（复杂的）构建过程的结果是一个

index.html.template

文件，可能包含环境变量，例如

$CDN_URL

。然后，对于管道的每个阶段，（简单的）部署脚本可以运行诸如 envsubst 之类的工具来提供最终值并生成其 index.html 文件。

如果这不能很好地与特定的构建工具一起使用，例如 HTML Webpack 插件，那么在 post webpack 脚本中做正确的事情相对简单，就像我的这个例子。