TL;DR检查最后一段
我的场景：我有以下文件：
- app.css (在 HTML 中添加
</head>之前( - 供应商.js (在
</body>之前以 HTML 形式添加( - app.js(在 HTML 中添加，紧挨之前
</body>之后的 vendor.js(
Html webpack 插件正在我的 html 模板中添加上述文件。 在这种情况下，首先我的浏览器将无法请求下载vendor和app，必须等待样式表首先下载。这很糟糕。其次，我的脚本将不必要地停止我的 DOM 在它已经是 SSR 渲染的 html 时渲染第一个绘制。
其次，我正在添加解决它的defer。但首先，为什么我的defer脚本必须等待样式表下载，即使是那些脚本，而在 DOM 构建中不需要它(而只是功能(！
所以，我想把这些deferred scripts放在 head 标签中，这在该html webpack plugin是可能的，但我想把它们放在样式标签(对于外部样式表(之前，以使浏览器可以并行请求这些脚本而不是等待。
首先，你认为这是一个好主意吗？(可能是因为浏览器只能有有限的并行连接，因此可能会阻碍下载图像等。或者可能是现代浏览器在尝试在 html 中向前看并请求延迟脚本时自动执行此操作，但这只是最近的浏览器，不是吗？)
其次，如何使用 html webpack 插件实现将延迟脚本放在样式标签之前？(我想具体知道这一点(
在配置中设置inject: false选项以禁用 HTML webpack 插件以注入脚本标签，然后将脚本和样式标签自己放在自定义模板中：
webpack.config.js
plugins: [new HtmlWebpackPlugin({
template: 'src/index.html',
inject: false
})]
索引.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
</head>
<body>
<%= htmlWebpackPlugin.files.chunks.main.entry %>
</body>
</html>
html-webpack-plugin有一个配置inject，有4个不同的值：
new HtmlWebpackPlugin({
template: './index.hbs',
inject: 'body'
})
这是它的作用：
| 选项 | 详细信息 |
|---|---|
| true | 将根据脚本加载选项将其添加到头部/身体 |
| 假 | 将禁用自动注射 |
| body' | 所有 JavaScript 资源都将放置在 body 元素的底部 |
| head' | 将脚本放在 head 元素中 |