Javascript webpack[hash]和[chunkhash]的用途是什么？

谁能告诉我[hash]和[chunkhash]的目的是什么，它们来自哪里

output: {
    path: "/home/proj/cdn/assets/[hash]",
    publicPath: "http://cdn.example.com/assets/[hash]/"
} 

---

基本上，它与浏览器缓存相关——当您为资产提供服务时，您通常希望告诉客户机/浏览器，它们可以使用相同的脚本/样式表/jpeg等，而无需每次下载。这是通过发送适当的HTTP头字段来完成的

那么问题是，您应该告诉客户机他们可以继续使用相同的样式表多长时间？如果你重新设计你的网站，而他们没有下载你的新样式表，他们就看不到这些变化。解决方案通常是在样式表文件名中添加某种标识符或版本号-如果此id/版本在样式表更改时更改（因此文件名不同），浏览器将再次下载它（这称为缓存破坏）

基本上，webpack可以向bundle输出名称添加一个散列，作为bundle内容的一个函数，当内容发生变化时，该散列会有所不同，从而使过程自动化<如果要将捆绑包拆分为多个块，则code>chunkhash会执行相同的操作

---

这里有一些与网页无关的讨论：

这一点对我来说暂时不明显，所以我认为它值得更详细的解释

官方文件所述：

官员对其目的的简要说明：

确保浏览器拾取更改的文件的简单方法是使用

output.filename

替换。

[hash]

替换可用于 在文件名中包含特定于生成的哈希，但它是 最好使用

[contenthash]

替换，它是 文件的内容，每个资产的内容不同

另一种解释是从

output.filename

的

• [hash]

  是“为每个构建生成的唯一哈希”

• [chunkhash]

  是“基于每个区块的内容”

• [contenthash]

  是“为提取的内容生成的”

让我们用例子让它更容易理解：

我的

src

目录中有3个文件：

index.js

，

index.css

，

vendors.js

我的示例网页包配置中的相关部分：
（不是完整的工作配置！）

因此，我有两个块名，

index

和

vendors

，但请注意

index

块也将包含

css

内容，因为它在数组中导入了

css

文件。在构建时，

css

部分将使用

MiniCssExtractPlugin

（在我的例子中）导出到一个单独的文件中，但是Webpack知道

index.js

和

index.css

属于同一块

现在，让我们尝试使用不同的散列类型来构建它。（同时更改两个

文件名
选项）

使用[hash]：


每个文件都有相同的哈希，因为
[hash]
是基于我们使用的所有源文件生成的。如果我在不更改任何内容的情况下重新运行构建，生成的哈希将保持不变。如果我只编辑一个文件，那么散列将发生变化，我生成的所有包的名称中都会有这个新的散列

使用[chunkhash]：


正如您所看到的，第一个和第二个文件来自相同的
索引
块，因此它们的名称中有相同的散列。这是因为
[chunkhash]
是基于给定块的全部内容生成的。因此，如果我编辑，比如说
index.css
并重新构建，来自
index
区块的文件将有一个新的散列，但是来自
供应商的
区块的文件将保持与以前相同

使用[contenthash]：


这是显而易见的。生成的每个文件的名称中都有一个唯一的散列，该散列是根据该文件的内容计算得出的。如果我更改，比如说重新构建
index.css
，只有生成的
index.css
将有一个新的散列。
是的，但仍然不清楚它是为什么构建的。。。这也是一个很有趣的话题。也许这对我来说很容易理解you@StepanSuvorov我相信你同时也明白了这一点，但也许我的回答可以帮助其他人理解这一点。因为我使用哈希，我的用户总是能得到应用程序的更新版本，但缺点是，除非按下Ctrl+F5键，否则当应用程序被代码拆分，并且试图使用旧版本/哈希（显然不再存在）动态拉取JS文件时，用户可能会出现控制台错误。有什么最佳做法可以解决这个问题吗？我认为最佳做法是在推送新代码并为非静态文件（如
index.html
）指定
Cache Control:no Cache
）之前不要清空公用文件夹。
entry: {
  index: ["./src/index.js", "./src/index.css"],
  vendors: ["./src/vendors.js"]
},
output: {
  filename: "[name].[hash].js"
}
plugins: [
  new MiniCssExtractPlugin({
    filename: "[name].[hash].css"
  })
]