What is the purpose of webpack [hash] and [chunkhash]?

Question

Could somebody tell me what is the the purpose [hash] and [chunkhash] and where do they come from?

output: {
    path: \"/home/proj/cdn/assets/[hash]\",
    publ         


        

Answer 1

Basically its related to browser cacheing - when you serve assets you generally want to tell the client/browser that they can use the same script/stylesheet/jpeg etc without having to download it every single time. This is done by sending the appropriate HTTP header fields.

The problem then is how long should you tell the client they can keep using the same stylesheet for example? If you redesign your site and they dont download your new stylesheet they wont see those changes. The solution is usually to add some kind of identifier or version number to the stylesheet file name - if this id/version changes when the stylesheet changes (and thus the file name is different) the browser will download it again (this is known as cache busting).

Basically webpack can add a hash to the bundle output name that, being a function of the bundle content, will be different when the content changes - thus automating the process. chunkhash does the same thing if you are splitting a bundle into multiple chunks.

Heres some non-webpack related discussion: Strategies for Cache-Busting CSS