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

Question

TL;DR Check last paragraph TL;DR检查最后一段

My Scenario: I'm having following files:我的场景：我有以下文件：

app.css (added in html just before </head> ) app.css（在</head>之前添加到 html 中）
vendor.js (added in html just before </body> ) vendor.js（在</body>之前添加到 html 中）
app.js (added in html just before </body> after vendor.js) app.js（在 html 中添加在</body>之前的 vendor.js 之后）

Html webpack plugin is adding above files in my html template. Html webpack 插件正在我的 html 模板中添加上述文件。 In this case, first my browser won't be able to make request to download vendor and app and has to wait for stylesheet to get downloaded first.在这种情况下，首先我的浏览器将无法请求下载vendor和app ，并且必须等待样式表首先被下载。 That's bad.那很糟。 Second , my script will unnecessary stop my DOM to render first paint when it's already SSR rendered html.其次，当我的 DOM 已经是 SSR 呈现的 html 时，我的脚本将不必要地停止我的 DOM 来呈现第一次绘制。

For second , I'm adding defer which resolves it.其次，我添加了defer来解决它。 But for first , why my defer script has to wait for stylesheet to get downloaded even those scripts when it's not required in DOM building (but just functionality)!但是首先，为什么我的defer脚本在 DOM 构建中不需要它（而只是功能）时，即使是那些脚本也必须等待样式表被下载！

So, I want to put those deferred scripts inside head tag which is possible with that html webpack plugin but I want to put them before style tag (for external stylesheet) to make benefit that browser can request these scripts parallelly instead of waiting.所以，我想将那些deferred scripts放在 head 标签中，这可以通过该html webpack plugin但我想将它们放在样式标签（用于外部样式表）之前，以使浏览器可以并行请求这些脚本而不是等待。

Firstly, do you think it's a good idea?首先，你认为这是个好主意吗？ (May be because browser can have only limited parallel connections so, it might hinder downloading images, etc. Or may be modern browsers do it automatically as they try to look ahead in html and request defer scripts but it's only recent browsers, isn't it? ) （可能是因为浏览器只能具有有限的并行连接，所以它可能会阻碍下载图像等。或者可能是现代浏览器在尝试在 html 中向前看并请求延迟脚本时自动执行此操作，但它只是最近的浏览器，不是它？）

Secondly , how to achieve putting deferred scripts before style tag using the html webpack plugin ?其次，如何使用html webpack插件实现在style标签之前放置延迟脚本？ (I want to specifically know this) （我特别想知道这个）

Answer 1

Set inject: false option in configuration to disable html webpack plugin to inject scripts tags, then place the script and style tags yourself in your custom template :在配置中设置inject: false选项以禁用 html webpack 插件来注入脚本标签，然后自己将脚本和样式标签放置在您的自定义模板中：

webpack.config.js webpack.config.js

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

index.html索引.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 has a configuration inject with 4 different values: html-webpack-plugin有一个包含 4 个不同值的配置inject ：

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

and here what it does:它的作用是：

Option选项	Details细节
true真的	will add it to the head/body depending on the scriptLoading option将根据 scriptLoading 选项将其添加到头部/身体
false错误的	will disable automatic injections将禁用自动注射
'body' '身体'	all javascript resources will be placed at the bottom of the body element所有 javascript 资源都将放置在 body 元素的底部
'head' '头'	will place the scripts in the head element将脚本放在 head 元素中

Refer more details here: https://github.com/jantimon/html-webpack-plugin#options在此处参考更多详细信息： 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