浏览器如何请求哈希文件名

Question

我是网络开发的初学者。在一个项目中，我看到构建了资产文件并更改了它们的名称——在它们的名称后附加了一个哈希字符串。我知道有些捆绑器可以做到这一点，但我不明白浏览器如何知道它们的 "new" 名称。例如，如果我在 index.js 文件中有 <script src="/main.js"...> 并且在构建后这个 main.js 变成了 main-ad466ef6367...js，这个脚本标签应该相应地更改，新名称正确？

Answer 1

你的假设是正确的。发送到浏览器的 HTML 应该具有指向 js、css 和其他资产的正确链接。如果您使用 html webpack plugin to generate your html it can inline the hashed links to your assets out of the box. If you only use webpack to bundle your assets you can use manifest plugin 生成一个 manifest.json 文件，其中将包含您的资产的对象图，即

{
  "main.js": "/main-4kj5h62.js",
  "style.css": "/style-k67bv2.css",
  "logo.svg": "/logo-m2vb456.svg"
}

您可以在您的服务器应用程序中引用此文件以内嵌指向您资产的正确链接。

浏览器如何请求哈希文件名

How are hash file names requested by a browsre

hash

assets

build

webpack