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

Question

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

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

Answer 1

这个对我来说暂时不明显,所以我认为值得一些更详细的解释.

官方文件说:

官方文档中有关其用途的简要说明:

确保浏览器选择已更改文件的一种简单方法是使用 output.filename替换.该[hash]置换可用于文件名中包含特定生成散列,但它甚至更好使用[contenthash]替代这是一个文件的内容,这是每个资产不同的哈希值.

从文档中逐一解释output.filename:

• [hash] 是"为每个构建生成的唯一哈希"
• [chunkhash] 是"基于每个块的内容"
• [contenthash] 是"为提取的内容生成的"

让我们通过例子让它更容易理解:

我在我的3个文件src目录: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属于同一块.

现在让我们尝试用不同的散列类型构建它.(filename平等改变两个选项)

使用[hash]:

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

使用[chunkhash]:

如您所见,第一个和第二个文件来自同一个index块,因此它们的名称中包含相同的哈希值.这是因为它[chunkhash]是根据给定块的整个内容生成的.因此,如果我编辑让我们说index.css并重新构建,来自index块的文件将有一个新的哈希,但来自vendors块的那个将保持与以前相同.

使用[contenthash]:

这一点很明显.每个生成的文件在其名称中都有一个唯一的哈希值,根据该文件的内容计算得出.如果我改变让我们说index.css重新构建,只有生成的index.css将有一个新的哈希.

Answer 2

基本上它与浏览器缓存有关 - 当你提供资源时,你通常想告诉客户端/浏览器他们可以使用相同的脚本/样式表/ jpeg等,而不必每次都下载它.这是通过发送适当的HTTP头字段来完成的.

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

基本上,webpack可以向bundle输出名称添加一个哈希值,它作为bundle内容的一个函数,在内容发生变化时会有所不同 - 从而使进程自动化.chunkhash如果将分组分成多个块,则会执行相同的操作.

下面是一些非webpack相关的讨论:Cache-Busting CSS的策略