How to inject Webpack build hash to application code

htmlwebpackplugin
webpack libraryexport
webpack build timestamp
webpackjsonp
webpack stats
extendedapiplugin
webpack defineplugin
webpack compilation hash

I'm using Webpack's [hash] for cache busting locale files. But I also need to hard-code the locale file path to load it from browser. Since the file path is altered with [hash], I need to inject this value to get right path.

I don't know how can get Webpack [hash] value programmatically in config so I can inject it using WebpackDefinePlugin.

module.exports = (env) => {
  return {
   entry: 'app/main.js',
   output: {
      filename: '[name].[hash].js'
   }
   ...
   plugins: [
      new webpack.DefinePlugin({
         HASH: ***???***
      })
   ]
  }
}

In case you want to dump the hash to a file and load it in your server's code, you can define the following plugin in your webpack.config.js:

const fs = require('fs');

class MetaInfoPlugin {
  constructor(options) {
    this.options = { filename: 'meta.json', ...options };
  }

  apply(compiler) {
    compiler.hooks.done.tap(this.constructor.name, stats => {
      const metaInfo = {
        // add any other information if necessary
        hash: stats.hash
      };
      const json = JSON.stringify(metaInfo);
      return new Promise((resolve, reject) => {
        fs.writeFile(this.options.filename, json, 'utf8', error => {
          if (error) {
            reject(error);
            return;
          }
          resolve();
        });
      });
    });
  }
}

module.exports = {
  // ... your webpack config ...

  plugins: [
    // ... other plugins ...

    new MetaInfoPlugin({ filename: 'dist/meta.json' }),
  ]
};

Example content of the output meta.json file:

{"hash":"64347f3b32969e10d80c"}

I've just created a dumpmeta-webpack-plugin package for this plugin. So you might use it instead:

const { DumpMetaPlugin } = require('dumpmeta-webpack-plugin');

module.exports = {
  ...

  plugins: [
    ...

    new DumpMetaPlugin({
      filename: 'dist/meta.json',
      prepare: stats => ({
        // add any other information you need to dump
        hash: stats.hash,
      })
    }),
  ]
}

Please refer to the Webpack documentation for all available properties of the Stats object.

Adding Hashes to Filenames, Webpack would generate filenames like these based on it: That means if the application code or CSS changed, it would invalidate both. Therefore, instead of � For each build, Webpack generates an in-memory hash allowing to know if two build outputs are the same or not. This plug-in outputs a json file contaning this described build hash. This can be especially useful when you want to check if a new version of a Single Page Application (SPA) runned by your user's browser is available.

Seems like it should be a basic feature but apparently it's not that simple to do.

You can accomplish what you want by using wrapper-webpack-plugin.

plugins: [ new WrapperPlugin({ header: '(function (BUILD_HASH) {', footer: function (fileName) { const rx = /^.+?\.([a-z0-9]+)\.js$/; const hash = fileName.match(rx)[1]; return `})('${hash}');`; }, }) ]

A bit hacky but it works — if u don't mind the entire chunk being wrapped in an anonymous function. Alternatively you can just add var BUILD_HASH = ... in the header option, though it could cause problem if it becomes a global.

I created this plugin a while back, I'll try to update it so it provides the chunk hash naturally.

Output Management, This guide extends on code examples found in the Asset Management guide. in our index.html file, but as your application grows and once you start using hashes We can see that webpack generates our print.bundle.js and app. bundle.js� This webpack plugin accepts a single argument, a function to which returns the code to inject into the bundle. The function is called using the same context as the loader, so everything here applies.

On server,you can get [hash] id with some function to read filename (example: web.bundle.f4771c44ee57573fabde.js) from your bundle folder

Output, However, when creating multiple bundles via more than one entry point, code splitting, or various plugins, Using the unique hash generated for every build:. webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

You can pass the version to your build using webpack.DefinePlugin

If you have a package.json with a version, you can extract it like this:

const version = require("./package.json").version;

For example (we stringified the version):

new webpack.DefinePlugin({
    'process.env.VERSION': JSON.stringify(version)
}),

then in your javascript, the version will be available as:

process.env.VERSION

HtmlWebpackPlugin, GuidesGetting StartedAsset ManagementOutput ManagementDevelopmentCode This is especially useful for webpack bundles that include a hash in the filename You can either let the plugin generate an HTML file for you, supply your own <html> <head> <meta charset="UTF-8"> <title>webpack App</title> < /head>� The loader branch covers how to integrate TypeScript into our Webpack build process in order to transpile our application code down to ES3 syntax. Note that we don't introduce any TypeScript-specific features; I even leave the files as .js files.

Caching, So we're using webpack to bundle our modular application which yields a However, it can also cause headaches when you need new code to be The [ contenthash] substitution will add a unique hash based on the content of an asset . A unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an '' .

Loading webpack bundles with hashed filenames � Issue #86 , Forwarding all request of app.js to the hashed version is not ideal I guess this is because the code is executed by a child-process. I want to import files in different locations, how to use inject ??? jantimon/html-webpack-plugin#624 If the asset ever changes, webpack will generate a new hash as you� 6 How to inject Webpack build hash to application code Dec 8 '19. 3 Change jQuery set without producing a new jQuery object Jan 18 '12. 3 How to make ES6 class final

jantimon/html-webpack-plugin: Simplifies creation of HTML , This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an� When using Webpack, one thing you may notice is that there's a specific Hash key for each build, and unlike the file hash or chunk hash it changes everytime when you build. This simple plugin helps you quickly get the build hash with the following code:

Comments
  • Druganor, thanks fo this, I ended up writing out metadata to a file just like so. I needed chunk.name -> chunk.renderedHash map. stats.compilation.chunks.forEach( chunk => { metaInfoObject[chunk.name] = chunk.renderedHash })
  • Thanks for your answer. I achieved it using ExtendedAPIPlugin which provided me a global variable webpack_hash.
  • Yeah, +1, at the end of the day this is a really pragmatic, easy to understand solution that doesn't involve any magic or obscure webpack config. Going with this.
  • I'm getting version is undefined while building. Where is that version defined?
  • We never bump version in package.json. We've different method to do versioning. I can't inject hash directly?
  • Ah like that, sorry I did not notice that. Maybe this answer will help? stackoverflow.com/a/39085075/4496465
  • Great. ExtendedAPIPlugin provided webpack_hash as global variable. Thanks! But I'm wondering how many such variables are injected into my code.
  • Just looked at the source, looks like it is only 2; webpack_hash and webpack_chunkname . Source: github.com/webpack/webpack/blob/master/lib/ExtendedAPIPlugin.js