在webpack中散列文件名 - 为什么？

Question

我在webpack文档中遇到了以下内容:

   {
    output: {
        path: path.join(__dirname, "assets", "[hash]"),
        publicPath: "assets/[hash]/",
        filename: "output.[hash].bundle.js",
        chunkFilename: "[id].[hash].bundle.js"
    }
}

将哈希添加到文件名的重点是什么？文档谈论如何做到这一点,但不是为什么.这有什么好处？

Answer 1

原因是缓存破坏/失效.有些人为它使用查询字符串(?somehash),但这不适用于块拆分,而文件名中的哈希则不行.有关概述,请参阅https://github.com/webpack/docs/wiki/long-term-caching.

请注意,[chunkhash]如果您使用require.ensure(或System.import在webpack 2中)*,则不能在条目块上使用; 你需要使用像从入门块分开"块清单" chunk-manifest-webpack-plugin或inline-manifest-webpack-plugin.

*:在webpack 1中,[chunkhash]如果任何"子块"发生更改,将始终导致条目块更改,除非您将清单拆分出来.在webpack 2中,它将是一个编译时错误.

Answer 2

假设您没有更改 JavaScript 包的文件名和 css 文件名。当您部署时，您可能已经更改了这些文件中的某些内容。您将更喜欢任何浏览器来获取这些文件的新版本（带有您的更改）。

如果您继续使用相同的文件名，浏览器会说“我不需要访问后端，我的缓存中有这个文件！” - 并使用不包括您的更改的版本。

为您的 JavaScript 包指定一个新名称后，浏览器会说 - “嘿，这是一个新文件”，然后执行 http 调用来获取它。