如何使用HTMLWebpack插件将脚本标签放在样式标签之前

TL; DR 检查最后一段

我的方案： 我有以下文件：

app.css（在html之前添加）

vendor.js（在html之前添加）

app.js（在vendor.js之后的html中添加）

HTML Webpack插件正在我的html模板中添加以上文件。在这种情况下，首先，我的浏览器将无法发出下载请求vendor，app而必须等待样式表首先被下载。那很糟。其次，当脚本已经SSR呈现html时，我的脚本将不必要地停止DOM呈现第一幅画。

对于第二个，我将defer它解决它。但是首先，为什么defer在DOM构建中不需要脚本（只是功能）时，为什么我的脚本必须等待样式表下载，甚至包括那些脚本！

因此，我想将其放置deferred scripts在可能的head标记内，html webpack plugin但我想将其放置在style标记之前（对于外部样式表），以使浏览器可以并行请求这些脚本而不用等待而受益。

首先，您认为这是个好主意吗？（可能是因为浏览器只能具有有限的并行连接，所以，它可能会阻止下载图像等。或者可能是现代的浏览器在尝试使用html并请求延迟脚本时会自动执行此操作，但这只是最近的浏览器，并非它吗？）

其次，如何使用html webpack插件实现将延迟脚本放在样式标签之前？ （我想特别知道这一点）

inject: false在配置中设置选项以禁用html webpack插件注入脚本标签，然后将脚本和样式标签自己放置在自定义模板中：

webpack.config.js

plugins: [new HtmlWebpackPlugin({
  template: 'src/index.html',
  inject: false
})]

index.html

  
    
  
  

    <%= htmlWebpackPlugin.files.chunks.main.entry %>