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），但这不适用于块拆分，而文件名中的哈希则不行。有关概述，请参阅arrow function。

请注意，如果您使用[chunkhash]（或webpack 2中的require.ensure）*，则无法在条目块上使用System.import;你需要分开＆＃34; chunk manifest＆＃34;通过使用chunk-manifest-webpack-plugin或inline-manifest-webpack-plugin等内容从条目块中获取。

*：在webpack 1中，[chunkhash]将始终导致条目块更改，如果任何＆＃34;子块＆＃34;除非您将清单拆分出来。在webpack 2中，它将是一个编译时错误。

Answer 2

假设您不更改JavaScript捆绑包和css文件名的文件名。部署时，您可能已经更改了这些文件中的某些内容。您将更喜欢使用任何浏览器来获得这些文件的那些新版本（随着更改）。

如果您将使用相同的文件名，浏览器将显示“我不需要到达后端，就可以在缓存中获取此文件！” -并使用不包含您所做更改的版本。

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

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

2 个答案: