Question

有人可以告诉我[hash]和[chunkhash]的目的是什么？它们来自哪里？

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

Answer 1

这个对我来说已经不太明显了，所以我认为它应该得到更详细的解释。

官方文档中的内容

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

确保浏览器获取更改的文件的一种简单方法是使用 output.filename个替换项。 [hash]替换可用于在文件名中包含特定于构建的哈希，但是甚至最好使用[contenthash]替代，即文件的内容，每种资产都不同。

output.filename的{{3}}中的另一种解释：

[hash]是“为每个版本生成的唯一哈希”
[chunkhash]是“基于每个块的内容”
[contenthash]是“为提取的内容生成的”

让我们通过示例使其更易于理解：

我的src目录中有3个文件：index.js，index.css，vendors.js

我的示例Webpack配置中的相关部分：
（不是完整的有效配置！）

entry: {
  index: ["./src/index.js", "./src/index.css"],
  vendors: ["./src/vendors.js"]
},
output: {
  filename: "[name].[hash].js"
}
plugins: [
  new MiniCssExtractPlugin({
    filename: "[name].[hash].css"
  })
]

所以我有2个块名称，index和vendors，但请注意index块也将包含css内容，因为它导入了css数组中的文件。构建时，css部分将使用MiniCssExtractPlugin导出到一个单独的文件（在我的情况下），但是Webpack知道index.js和index.css属于同一块。 / p>

现在让我们尝试使用不同的哈希类型来构建它。（相等地更改两个filename选项）

使用[哈希]：

documentation

每个文件都具有相同的哈希值，因为[hash]是基于我们使用的所有源文件生成的。如果我重新运行该构建而不更改任何内容，则生成的哈希将保持不变。如果我仅编辑一个文件，则哈希将更改，并且所有生成的捆绑软件的名称中都会包含这个新哈希。

使用[chunkhash]：

如您所见，第一个和第二个文件来自相同的index块，因此它们的名称具有相同的哈希值。这是因为[chunkhash]是基于给定块的全部内容生成的。因此，如果我编辑index.css并重新生成，则来自index块的文件将具有一个新的哈希，但是来自vendors块的文件将保持与以前相同

使用[contenthash]：

这很明显。每个生成的文件在名称中都有一个唯一的哈希，该哈希是根据该文件的内容计算得出的。如果我更改index.css进行重新构建，则仅生成的index.css将具有新的哈希。

Answer 2

基本上它与浏览器缓存有关 - 当您提供资源时，您通常希望告诉客户端/浏览器他们可以使用相同的脚本/ stylesheet / jpeg等，而无需每次都下载它。这是通过发送适当的HTTP头字段来完成的。

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

基本上，webpack可以向bundle输出名称添加一个哈希值，它作为bundle内容的一个函数，在内容发生变化时会有所不同 - 从而使进程自动化。如果要将一个包拆分成多个块，chunkhash会做同样的事情。

下面是一些非网络包相关的讨论：Strategies for Cache-Busting CSS

webpack [hash]和[chunkhash]的目的是什么？

2 个答案: