119. webpack 文件hash的几种方式

[zlx362211854]

webpack中对于输出文件有三种hash方式：

• hash hash是工程级别的，所有文件只对应一个hash，只要工程里面任何文件改变了，整个hash就会改变
• chunkhash chunkhash是入口文件级别的，也就是说我们只要做了代码拆分，每个chunk都对应一个hash
• contenthash contenthash是文件级别的，每个文件是一个单独的hash，只有文件内容改变，hash才会改变。 contenthash是最细粒度上的文件hash

[goldEli]

为什么要文件要加 haah 值？

为了控制浏览器缓存，当文件名未发生改变时，浏览器会直接从缓存中读取。

如何加 hash？

总共有三种方法：

hash

{
    enter: "index.js",
    output: {
      filename: "[name].[hash].js",
      path: path.resolve(__dirname, 'dist')
    } 
}

如上设置每次 build 对应的文件 hash 值都会发生改变。

如果有多个入口文件，如何只控制某个入口文件的 hash 呢？ 这需要用到 chunkhash。

chunkhash

{
    entry: {
      index: "./index.js",
      another: "./another.js"
    },
    output: {
      filename: "[name].[chunkhash].js",
      path: path.resolve(__dirname, 'dist')
    }
}

当 index 的文件发生改变就不会影响到 another.js 的 hash。

但是有可能，一个 chunk 也会 codespilt 成多个文件，当只有某个文件发生改变也会影响到所有的 chunk。所以最好让 hash 控制到每个文件，这里就需要用到 contenthash

contenthash

{
    entry: {
      index: "./index.js",
      another: "./another.js"
    },
    output: {
      filename: "[name].[contenthash].js",
      path: path.resolve(__dirname, 'dist')
    }
}

Reference

Hash vs chunkhash vs ContentHash