Html-webpack-plugin: Appending chunkhash to the file name instead of a hash

[tomitrescak]

Hi, thank for all the great work!
I wanted to ask if it is possible to append chunkhash to the filename instead of a hash?
Currently the { hash: true } can append file?#hash to the file, but I'd really like to add this for all automatically generated chunks.

The idea is to generate chunks only with filename (e.g. mychunk.js) and inserting it to HTML with (mychunk.js?chunkhash).

This way I can store the builds easily in git and when deployed, users will get only recently changed files.

[damianobarbati]

Yeah, absolutely +1!!!
Use case: 2 chunks, 1 for the app (frequently changed), 2 for the vendor (almost never change).
Since we append the "bundle hash", the vendor gets invalidated but it didn't change at all!

We should append the hash relative to the chunk, this way only the chunks which really changed will be reloaded by browsers.

[damianobarbati]

@jantimon any chance on this? :)

[caub]

The only option I can see is to read the output files on disk, hash them with md5 but they are not written on disk yet at that time right?

the better option is to compute a hash from the compilation object sources, but it's mixed I think, not sorted yet for the output format

[mastilver]

I personally don't use hash, I use chunkhash on output.filename

[caub]

Yes I tried that at the same time filename: '[name].js?v=[chunkhash:4]'

html-webpack-plugin generates a

<script type="text/javascript" src="app.js?v=e2b6"></script>
<script type="text/javascript" src="pdf.worker.js?v=d020"></script>

which is perfect, but keep the css like:

<link href="app.css" rel="stylesheet">

webpack config:

module.exports = {
    entry: {
        app: [
            './src/scripts/main.js',
            './src/style/style.scss'
        ],
        'pdf.worker': './stuff/pdf/pdf.worker.js',
    },
    output: {
        path: process.cwd()+'/build',
        filename: '[name].js?v=[chunkhash:4]',
        // chunkFilename: '[chunkhash].js'
    },
    node: {
        fs: 'empty',
        child_process: 'empty'
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json']
    },
    module: {
        // loaders: ....
    },
    plugins: [
       // ......
        new HtmlWebpackPlugin({
            //hash: true,
            title: '......',
            template: './src/index.html',
            filename: './index.html'
        }),
    ]
};

[mastilver]

Of course

You need to do the same with ExtractTextPlugin's filename but using [contenthash]

[caub]

thanks!

I think this issue could be closed?

[stale[bot]]

This issue had no activity for at least half a year. It's subject to automatic issue closing if there is no activity in the next 15 days.

[lock[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.