Adding git branch name to webpack bundle

6/3/2020

What for?

Recently I came across the fact that it was necessary to add the name of the current git branch to the test build.
The branches are named by tickets, so when testing the assembly it is quite convenient to watch the version by branch.
Example branch name: bugfix/widget-3034

It was not difficult to do this, and everything is pretty easy to google, but since I need to write at least something on the blog, I decided to share it.
There are 2 ways:

Very easy way

We will need to download the package git-revision-webpack-plugin

Run:

npm install --save-dev git-revision-webpack-plugin

And then set up the plugin:

const webpack = require("webpack");
const GitRevisionPlugin = require("git-revision-webpack-plugin");
const gitRevisionPlugin = new GitRevisionPlugin();

const branchName = JSON.stringify(gitRevisionPlugin.branch());

module.exports = {
    plugins: [
        gitRevisionPlugin,
        new webpack.DefinePlugin({
            BRANCHNAME: branchName
        })
    ]
};

Easy way

This way is practically no different from the first.
The only difference is that instead of using the plugin, we get the name of the branch ourselves.

const webpack = require("webpack");
const childProcess = require("child_process");

const branchName = childProcess
    .execSync("git rev-parse --abbrev-ref HEAD")
    .toString()
    .trim();

module.exports = {
    plugins: [
        new webpack.DefinePlugin({
            BRANCHNAME: `"${branchName}"`
        })
    ]
};

That's all.

Alexey Baranov