如何使用 html webpack 插件在样式标签之前放置脚本标签

Question

TL;DR检查最后一段

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

app.css（在</head>之前添加到 html 中）
vendor.js（在</body>之前添加到 html 中）
app.js（在 html 中添加在</body>之前的 vendor.js 之后）

Html webpack 插件正在我的 html 模板中添加上述文件。 在这种情况下，首先我的浏览器将无法请求下载vendor和app ，并且必须等待样式表首先被下载。 那很糟。 其次，当我的 DOM 已经是 SSR 呈现的 html 时，我的脚本将不必要地停止我的 DOM 来呈现第一次绘制。

其次，我添加了defer来解决它。 但是首先，为什么我的defer脚本在 DOM 构建中不需要它（而只是功能）时，即使是那些脚本也必须等待样式表被下载！

所以，我想将那些deferred scripts放在 head 标签中，这可以通过该html webpack plugin但我想将它们放在样式标签（用于外部样式表）之前，以使浏览器可以并行请求这些脚本而不是等待。

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

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

Answer 1

在配置中设置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>

Answer 2

html-webpack-plugin有一个包含 4 个不同值的配置inject ：

new HtmlWebpackPlugin({
   template: './index.hbs',
   inject: 'body'
})

它的作用是：

选项	细节
真的	将根据 scriptLoading 选项将其添加到头部/身体
错误的	将禁用自动注射
'身体'	所有 javascript 资源都将放置在 body 元素的底部
'头'	将脚本放在 head 元素中

在此处参考更多详细信息： https : //github.com/jantimon/html-webpack-plugin#options

如何使用 html webpack 插件在样式标签之前放置脚本标签

问题描述

2 个解决方案

解决方案1
11 2017-08-19 21:05:12

解决方案2
0 2021-07-20 09:06:58

如何使用 html webpack 插件在样式标签之前放置脚本标签

问题描述

2 个解决方案

解决方案1 11 2017-08-19 21:05:12

解决方案2 0 2021-07-20 09:06:58

解决方案1
11 2017-08-19 21:05:12

解决方案2
0 2021-07-20 09:06:58