How can I inject a build number with webpack?

Question

I\'d like to inject a build number and version information to my project as it\'s built with webpack. For example, so that my code can do something like:

var bui         


        

Answer 1

Here is my recipe, derived from the other answers to this question. This makes use of the WebpackVersionFilePlugin and execa, and works great for me right now.

Install the plugins via npm:

npm install webpack-version-file-plugin --save-dev
npm install execa --save-dev

webpack.config.js:

const WebpackVersionFilePlugin = require('webpack-version-file-plugin');
const execa = require('execa');

const gitHash = execa.sync('git', ['rev-parse', '--short', 'HEAD']).stdout;
const gitNumCommits = Number(execa.sync('git', ['rev-list', 'HEAD', '--count']).stdout);
const gitDirty = execa.sync('git', ['status', '-s', '-uall']).stdout.length > 0;

module.exports = {
// ... snip ...
plugins: [
    new WebpackVersionFilePlugin({
        packageFile: path.join(__dirname, 'package.json'),
        template: path.join(__dirname, 'version.ejs'),
        outputFile: path.join('build/ts/', 'version.json'),
        extras: {
            'githash': gitHash,
            'gitNumCommits': gitNumCommits,
            'timestamp': Date.now(),
            'dirty': gitDirty
        }
    }),
// ... snip ...

version.ejs (in project root):

{
    "name":       "<%= package.name %>",
    "buildDate":  <%= extras.timestamp %>,
    "version":    "<%= package.version %>",
    "numCommits": <%= extras.gitNumCommits %>,
    "hash":       "<%= extras.githash %>",
    "dirty":      <%= extras.dirty %>
}

So far, running this gets us a version.json file in build/ts with this content:

{
    "name":       "app name from package.json",
    "buildDate":  1518774257225,
    "version":    "2.0.1",
    "numCommits": 148,
    "hash":       "5a74b7a",
    "dirty":      false
}

The dirty flag indicates if the build included uncommitted or untracked changes.

I use TypeScript, so the following describes how to get the JSON file into my TypeScript code. If you don't have TypeScript, we have still reduced the problem to reading a JSON file. :-)

app.ts:

import * as appVersionJson from './version.json';

export const appVersion: AppVersion = appVersionJson;

export interface AppVersion {
    /** application name as specified in package.json */
    readonly name: string;

    /** build timestamp in milliseconds since the epoch */
    readonly buildDate: number;

    /** application version as specified in package.json */
    readonly version: string;

    /** number of commits in the Git repo */
    readonly numCommits: number;

    /** latest Git commit hash */
    readonly hash: string;

    /** flag is set when uncommitted or untracked changes are present in the workspace */
    readonly dirty: boolean;
}

// ...snip...
// now just use it in methods, for example:
appVersion.version + '.' + appVersion.numCommits + ' (' + appVersion.hash + ')'

Alright - hope this provides some more clues on how to have good build number information available in the code. Btw, npm version is a good way to bump the version numbers, when working like this.