时间戳

首页 > 解决方案 > 浏览器如何请求哈希文件名

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

问题描述

我是Web开发的初学者。在一个项目中，我看到构建了资产文件并更改了它们的名称 - 一个哈希字符串附加到它们的名称。我知道某些捆绑程序会发挥这种作用，但我不明白浏览器如何知道它们的“新”名称。例如，如果我在 index.js 文件中<script src="/main.js"...>，并且在构建后它main.js变成了一个main-ad466ef6367...js，那么这个脚本标签应该相应地更改，新名称对吗？

标签： webpackhashbuildassets

解决方案

你的假设是正确的。发送到浏览器的 HTML 应该具有指向 js、css 和其他资产的正确链接。如果您使用html webpack 插件来生成您的 html，它可以将散列链接内嵌到您的资产开箱即用。如果你只使用 webpack 来打包你的资产，你可以使用manifest 插件来生成一个manifest.json文件，该文件将包含你的资产的对象映射，即

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

您可以在您的服务器应用程序中引用此文件，以将正确的链接内联到您的资产。

推荐阅读