在webpack中对文件名进行哈希处理 - 为什么要这样做？

Question

我在webpack文档中发现了以下内容：

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

在文件名中添加哈希的目的是什么？文档中讲了很多如何做，但没有说为什么。这种做法有哪些优势适用的场景?

- devdropper87

---

谁知道呢，也许是因为所有的文件都不能命名为output.bundle.js？ - adeneo

独特且具有缓存破坏功能的文件名。 - Alexander O'Mara

@AlexanderO'Mara 把它作为答案添加，我会接受它。如果有其他原因，希望您能详细说明，因为文档没有提供帮助。 - devdropper87

Answer 1

原因是缓存失效。有些人使用查询字符串(?somehash)进行缓存失效处理，但这种方式无法与代码块分割一起使用，而在文件名中添加哈希则可以解决这个问题。请参见https://github.com/webpack/docs/wiki/long-term-caching了解概述。

请注意，如果您使用require.ensure(或webpack 2中的System.import)，则不能在入口代码块中使用[chunkhash]，您需要通过使用chunk-manifest-webpack-plugin或inline-manifest-webpack-plugin等插件将“代码块清单”与入口代码块分离。

*:在webpack 1中，[chunkhash]会在任何“子代码块”更改时导致入口代码块更改，除非您将清单拆分出来。在webpack 2中，这将是一个编译时错误。

- Jessidhia

Answer 2

假设您不更改JavaScript捆绑包和css文件名称。当您部署时，可能会更改这些文件中的某些内容。您会希望任何浏览器获取这些文件的新版本（包括您的更改）。

如果您仍然使用相同的文件名，浏览器会说“我不需要访问后端，因为我已经在我的缓存中得到了这个文件！”- 并使用不包括您更改的版本。

通过为您的JavaScript捆绑包命名一个新名称，浏览器将会说 - “嘿，这是一个新文件”，并进行http调用以获取它。

- chenop