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

Question

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

第一段说

  

要有效地缓存文件，它们应该有一个哈希或版本   他们的网址。

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，它会自动为您添加正确的哈希值。