webpack - 使用哈希的文件名以避免缓存

Question

[名称].[分机]?[哈希]

我对表达式有两个问题：

1. 这如何有助于避免浏览器中的缓存？
2. 实际上在 Windows 操作系统中，它会发出一个名为[name].[ext]的文件，没有?[hash]部分。所以，这不是一个好的解决方案吗？

Answer 1

当你require文件时，webpack 会将文件复制到输出目录并返回你的 url。返回的 url 应该有文件内容的 MD5 哈希，即使复制的文件没有用哈希命名。如果您在代码中使用此 url 来加载资源，浏览器将使用整个 url，而不仅仅是文件名。

因此，如果您有一个名为“icon.png”的文件，您可能希望将其替换为新图标，但保留相同的文件名。当您使用带有哈希的 url 时（即“icon.png?FE657AC13EB837AC”，浏览器将使用完整的 url 将其缓存在客户端计算机上。由于其中包含哈希，如果您更改图像，浏览器将下载一个新副本。如果 url 中没有散列，浏览器可以假定 'icon.png' 没有更改并使用缓存版本，并且永远不会检查服务器以查看它是否已更新。

如果您只是使用文件的 url 而不在 html 中使用哈希，那将达不到目的。您可以生成一个随机数或使用当前日期（例如在查询字符串中）使客户端每次都下载文件（或更改服务器上的标头以禁用缓存），但这并不理想。通过使用文件的 MD5 哈希，您允许浏览器缓存图像，只要图像具有相同的哈希，这实际上意味着它是相同的图像。