Javascript 如何使用html网页包插件将脚本标记置于样式标记之前_Javascript_Html_Webpack_Html Webpack Plugin_Deferred Loading

Javascript 如何使用html网页包插件将脚本标记置于样式标记之前

javascript html webpack

Javascript 如何使用html网页包插件将脚本标记置于样式标记之前,javascript,html,webpack,html-webpack-plugin,deferred-loading,Javascript,Html,Webpack,Html Webpack Plugin,Deferred Loading,TL；DR 检查最后一段我的场景：我有以下文件： app.css（在之前的html中添加） vendor.js（在之前的html中添加） app.js（在vendor.js之后的之前添加html）正在我的html模板中添加上述文件。在这种情况下，首先我的浏览器将无法请求下载供应商和应用程序，必须等待样式表首先下载。那太糟糕了第二个，我的脚本将不必要地停止我的DOM，以便在它已经是SSR呈现的html时呈现第一个绘画对于second，我添加了defer，它解决了这个问题。但是对于fi

TL；DR 检查最后一段

我的场景： 我有以下文件：

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

正在我的html模板中添加上述文件。在这种情况下，首先我的浏览器将无法请求下载

供应商

和

应用程序

，必须等待样式表首先下载。那太糟糕了第二个，我的脚本将不必要地停止我的DOM，以便在它已经是SSR呈现的html时呈现第一个绘画

对于second，我添加了

defer

，它解决了这个问题。但是对于first，为什么我的

defer

脚本必须等待样式表下载，即使这些脚本在DOM构建中不是必需的（只是功能）

所以，我想把那些

延迟脚本放在head标记中，这是html网页插件可以使用的但是我想把它们放在style标记之前（对于外部样式表），这样做的好处是浏览器可以并行地请求这些脚本，而不是等待
首先，你认为这是个好主意吗？（可能是因为浏览器只能有有限的并行连接，所以可能会妨碍下载图像等。也可能是现代浏览器在尝试使用html并请求延迟脚本时自动执行此操作，但这只是最近的浏览器，不是吗？）
其次，如何实现使用将延迟脚本放在样式标记之前？
（我想特别了解这一点）
在中设置inject:false
选项以禁用html网页包插件来插入脚本标记，然后将脚本和样式标记自己放入：
webpack.config.js
index.html
这是一条很好的建议，但您错过了脚本标签。应该是这样的
plugins: [new HtmlWebpackPlugin({
  template: 'src/index.html',
  inject: false
})]

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  </head>
  <body>

    <%= htmlWebpackPlugin.files.chunks.main.entry %>
  </body>
</html>