Use `[contenthash]` over `[hash]` and `[chunkhash]` for better long term caching

[alexander-akait]

For long term caching better use [contenthash] over [chunkhash].

From slack

sokra [2:59 PM]
A chunk contains modules i. e. a.js, b.css, and c.wasm. This results in 3 assets being generated JS, CSS and WASM. `[chunkhash]` is the hash of the complete chunk, which is JS + CSS + WASM. `[contenthash]` is the hash of the content of the file, which is different for each asset.

evilebottnawi [3:10 PM]
I.e. better use `[contenthash]` for chunks?

sokra [5:26 PM]
@evilebottnawi better use `contenthash`.

sokra [5:30 PM]
we probably should rename that in webpack 5 to `[hash]`.

evilebottnawi [5:34 PM]
Only one question why we need `chunkhash` after implement `contenthash` :smile: ?

sokra [5:39 PM]
not sure if there is a use case where chunkhash is better, but at least for backward-compat

Ref on issue in webpack webpack/webpack#7138.
Example of problem webpack-contrib/mini-css-extract-plugin#117.

[FadySamirSadek]

@evilebottnawi @montogeek does this mean chunkhash should be removed from the exampled in the guide and replaced with contenthash with only a mention that sometime it existed so people know it is still supported ?

[alexander-akait]

@FadySamirSadek alright, just backward compatibility

[alexander-akait]

@FadySamirSadek friendly ping, can we solve this problem faster? Looks like many people faced with this

[FadySamirSadek]

@evilebottnawi will finish it by the end of today

[alexander-akait]

/cc @FadySamirSadek

[Streemo]

I had this config and was running into the issue where a change in ./src/styles.css would cause the chunkhash for the main output js file to change, even if ./src/index.js was constant:

config = {
  entry: "./src/index.js",
  plugins: [
    new MiniCSSExtractPlugin({filename: "[contenthash].css"}),
    ...
  ],
  output: {filename: "[chunkhash].js"},
  ...
}

Changing the output to {filename: "[contenthash].js"} fixed the issue, causing the browser to only reload the changed css file, as expected. Does anyone have a good link to the documentation on "[contenthash]"? I was unable to find it.

[FadySamirSadek]

@Streemo I am working on fixing the documentation of [contenthash] but it has not been published yet

[Streemo]

@FadySamirSadek Awesome. One thing that confused me were the numbers added at the front of some of the content hashes e.g. **2.**9ff51031b7fe51cc21e6.js.gz, **1.**38ffde1f4124434ec546.js.gz which I noticed are not present in the [chunkhash]. Out of curiosity, are these ids of some sort and why are they required?