Webpack，为什么我们需要哈希来有效地缓存文件？

Question

来自https://webpack.github.io/docs/long-term-caching.html，

第一段说

为了有效地缓存您的文件，它们的 URL 中应该有一个哈希值或版本。

URL 中的哈希/版本使浏览器能够长期缓存文件的目的是什么？

Answer 1

通常，将不久的将来可能会更改的文件缓存较长时间并不是一个好主意，因为您的客户端可能不会加载这些文件的最新版本。因此，缓存您的bundle.js代码可能会导致以下问题：在更新代码后，bundle.js由于某些缓存设置，浏览器仍然会加载旧代码。

解决这个问题的一个好方法（在使用 webpack 时很容易使用）是对生成的包进行散列并将该散列附加到文件名中。因此，您的第一个版本被调用bundle.ad736defe.js，并且在进行任何修改后，该名称也会更改，例如更改为bundle.dffe3983.js. 有了这个，您就可以永远缓存这些文件，因为对代码的每次更改都会产生一个新的文件名，因此只要您的 index.html 中引用了完全相同的文件，客户端就会使用缓存的文件，并且它将一旦您更改了影响捆绑包内容的任何内容，请立即下载新版本。

Webpack 内置了该功能，通过提供包含[hash]模式的输出文件名可以非常轻松地激活该功能。

output: {
  path: path.resolve(__dirname, "dist"),
  publicPath: "/",
  filename: "bundle-[hash].js"
}

这会将您的散列包放入dist/bundle.<calculated_hash>.js.

由于您事先不知道文件名，因此您可以使用出色的HtmlWebpackPlugin，它会自动为您插入具有正确哈希值的脚本标签。