如何将脚本注入到 dist/<appName> 中生成的 index.html 中的索引 html 文件？答案

【问题标题】：How to inject scripts to index html file in the generated index.html in dist/<appName>?如何将脚本注入到 dist/<appName> 中生成的 index.html 中的索引 html 文件？
【发布时间】：2020-05-21 01:56:16
【问题描述】：

我有一个索引 html 文件，我需要在生产/暂存环境中注入一些基于配置的脚本。

工作区索引.html

<body>
  <app-root></app-root>
</body>

通过 ng build 在 dist/my-app 中生成 index.html

<body>
  <app-root></app-root>
  <script src="runtime-es5.js" nomodule defer></script>
  <script src="polyfills-es5.js" nomodule defer></script>
  <script src="styles-es5.js" nomodule defer></script>  
  <script src="vendor-es5.js" nomodule defer></script> 
  <script src="main-es5.js" nomodule defer></script>
</body>

我的要求：

<body>
  <app-root></app-root>
  <script src="script-staging.js"></script>
  <script src="runtime-es5.js" nomodule defer></script>
  <script src="polyfills-es5.js" nomodule defer></script>
  <script src="styles-es5.js" nomodule defer></script>  
  <script src="vendor-es5.js" nomodule defer></script> 
  <script src="main-es5.js" nomodule defer></script>
</body>

我正在使用带有 CLI 的 Angular 8 + Webpack。我已经包含了来自 angular.json 的 custom-webpack.configuration.js。我正在尝试使用 HTMLWebpackPlugin 来实现这一点。

被告知动态脚本加载是可选的，这意味着我将或不会将该 script.js 注入生成的 index.html 中，这将在构建时决定。所以在生成的 html 中注入脚本必须在构建时完成，我应该通过 webpack 的插件来完成。

任何帮助将不胜感激，挣扎了几天。

【问题讨论】：

标签： angular8 webpack-4 html-webpack-plugin angular-cli-v8

【解决方案1】：

您可以在应用对象的脚本数组中的 angular.json 中指向 ./scr/script-staging.js 的完整路径。

这里显示：-

"styles": [
  "styles.scss"
],
// like this
"scripts": [
  "./src/script-staging.js"
]

添加这行代码后，您应该再次构建您的应用程序“ng build”/“ng build --prod”，希望如果一切正常，那么它应该将您的文件添加到 index.html。

【讨论】：

感谢 Priyanshu 为您提供的 cmets。但这无济于事，因为假设有 100 个客户端使用此应用程序并且有一些特定于客户端的配置。因此，该配置可能存在于该特定客户端，也可能不存在。因此，必须在构建时检查此配置。因此，必须在构建时检查并包含此暂存文件的加载。
@user1759426 这个答案告诉你如何在构建时包含配置。根据您的评论，我认为您的意思是应该在运行时包含它。这就是你的意思吗（除非你为每个客户构建一个版本，在这种情况下这个答案实际上可以帮助你）？无论答案是什么，您能否更新您的问题以包含这些详细信息？
@JoryGeerts：同意 Priyanshu 的回答会有所帮助，如果我知道无论如何都必须包含这个脚本（script-staging.js）。假设在构建之前我不知道客户端的配置是否存在，在构建过程中我会找出配置是否存在然后在构建过程中加载这些配置。我正在尝试使用 webpack 自定义插件来做到这一点，现在我正在尝试使用 webpack 插件 HTMLWebpackPlugin 来实现同样的效果。
所以，澄清一下：您正在为每个客户端构建不同的版本。如果（例如）clientname.js 存在，你希望它被包含，否则你什么都不想要？
@JoryGeerts：现场