Webpack config output filename using square brackets params instead of a plain text

Question

In webpack.config.js, in output.filename I see square brackets. What does that mean? What's the difference between using that and a plain text?

output: {
    filename: '[name].js',

    // Webpack dev middleware, if enabled, handles requests for this URL prefix
    publicPath: 'dist/'
},

Answer 1

Those are placeholders that Webpack will replace with their actual value.

You can read more about it in the official docs: https://webpack.js.org/configuration/output/#output-filename.

These are the available options:

• [hash]: The hash of the module identifier.
• [chunkhash]: The hash of the chunk content.
• [name]: The module name.
• [id]: The module identifier.
• [query]: The module query, i.e., the string following ? in the filename.

For example, if you Webpack config looks like this:

{
    entry : {
        a: '...',
        b: '...',
        c: '...'
    },


    output: {
        filename: '[name].js',
        publicPath: 'dist/'
    }
}

Webpack will generate 3 output files, one for each key inside entry: a.js, b.js and c.js.

The difference between [hash] and [chunkhash] is that the former is generated per build, while the later is generated per output file.

That has a number of advantages, as if you are using hashes as cache-busters, maybe you generate a new build where only one of your files changes, but you will still force your users to re-download all of them. If you use [chunkhash], only the file that has changed will be downloaded again.

Also, remember not to use [chunkhash] in development mode, as that will make your build slower.