如何使用 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