hashing filenames in webpack - why?

Question

I came across the following in the webpack docs:

   {
    output: {
        path: path.join(__dirname, "assets", "[hash]"),
        publicPath: "assets/[hash]/",
        filename: "output.[hash].bundle.js",
        chunkFilename: "[id].[hash].bundle.js"
    }
}

What is the point/purpose of adding the hash to file names? The docs talk alot about how to do it, but not why. What are the scenarios in which this is beneficial?

Answer 1

The reason is cache busting / invalidation. Some people use a query string for it (?somehash), but that doesn't work with chunk splitting, while hash in filename does. See https://github.com/webpack/docs/wiki/long-term-caching for the overview.

Note that [chunkhash] cannot be used on the entry chunk if you use require.ensure (or System.import in webpack 2)*; you need to separate the "chunk manifest" from the entry chunk by using something like chunk-manifest-webpack-plugin or inline-manifest-webpack-plugin.

*: In webpack 1, [chunkhash] will always cause the entry chunk to change if any of the "child chunks" changes unless you split the manifest out. In webpack 2, it'll be a compile time error.

Answer 2

Assume you do not change file names for your JavaScript bundle and css file name. When you deploy you have probably change something in those files. You will prefer any browser to get those new version of those files (with your changes).

If you will stay with the same filenames browser will say "I dont need to reach the backend I got this file in my cache!" - and use a version not including your changes.

With having a new name for your JavaScript bundle the browser will say - "hey this is a new file" and do http call to get it.