Webpack Build: File Hash Unchanged Despite Content Changes — Analysis and Fix

· 1 min read · 361 Words · -Views -Comments

While bundling an Angular 4 app with webpack 2, I found two entry files whose output hash didn’t change.

Files:

'common': './node_modules/moment/moment.js',
'polyfills': `./client/${platform}/polyfills.browser.ts`,

These two entries serve Moment.js and browser compatibility for a SPA. My Webpack config for outputs looked like this:

 /**
         * Options affecting the output of the compilation.
         *
         * See: http://webpack.github.io/docs/configuration.html#output
         */
        output: {

            /**
             * The output directory as absolute path (required).
             *
             * See: http://webpack.github.io/docs/configuration.html#output-path
             */
            path: helpers.root('dist'),

            /**
             * Specifies the name of each output file on disk.
             * IMPORTANT: You must not specify an absolute path here!
             *
             * See: http://webpack.github.io/docs/configuration.html#output-filename
             */
            filename: '[name].[chunkhash].bundle.js',

            /**
             * The filename of the SourceMaps for the JavaScript files.
             * They are inside the output.path directory.
             *
             * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
             */
            sourceMapFilename: '[name].[chunkhash].bundle.map',

            /**
             * The filename of non-entry chunks as relative path
             * inside the output.path directory.
             *
             * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
             */
            chunkFilename: '[id].[chunkhash].chunk.js'

        },

After analysis: the entry bundles’ hashes didn’t change, but their contents did, because of references like webpackJsonp. Consider a scenario where index.html isn’t cached, and it references common by a fixed file name pattern. If common’s hash doesn’t change, the client may keep using the cached bundle while chunk files are new, causing runtime errors.

Why did the content change but the hash stay the same? Here’s the explanation:

  1. Definitions
    • [hash] is replaced by the hash of the entire compilation.
    • [chunkhash] is replaced by the hash of the specific chunk.
  2. Usage scenarios chunkhash is computed from an individual chunk’s content. Changing one chunk affects only its own hash, not others.

This explains the issue: the polyfills and common entry sources didn’t change, so their chunkhash stayed the same. But the overall build changed, which altered the generated bundle content (e.g., runtime/chunk references). Therefore, entry bundles are not ideal for chunkhash; prefer using [hash] for entry filenames instead.

References

Authors
Developer, digital product enthusiast, tinkerer, sharer, open source lover