Home

Awesome

Auto inject version - Webpack plugin

Adds version from package.json into every single file as top comment block.

Install

$ npm install webpack-auto-inject-version --save-dev

Table of Contents

What it does <br> How to use <br> Available options <br> Output examples How to use with other webpack plugins<br> Change log<br>

What it does

Auto Inject Version (AIV) can:

How to use

It's easy to set it up, all you need is:

Simple config example ( in webpack.conf.js )

var WebpackAutoInject = require('webpack-auto-inject-version');
...
module.exports = {
    ...
    plugins: [
        new WebpackAutoInject({
            // options
            // example:
            components: {
                AutoIncreaseVersion: false
            }
        })
    ]
}

Full config example ( in webpack.conf.js )

module.exports = {
    ...
    plugins: [
      new WebpackAutoInject({
        // specify the name of the tag in the outputed files eg
        // bundle.js: [SHORT]  Version: 0.13.36 ...
        SHORT: 'CUSTOM',
        SILENT: false,
        PACKAGE_JSON_PATH: './package.json',
        PACKAGE_JSON_INDENT: 4,
        components: {
          AutoIncreaseVersion: true,
          InjectAsComment: true,
          InjectByTag: true
        },
        componentsOptions: {
          AutoIncreaseVersion: {
            runInWatchMode: false // it will increase version with every single build!
          },
          InjectAsComment: {
            tag: 'Version: {version} - {date}',
            dateFormat: 'h:MM:ss TT', // change timezone: `UTC:h:MM:ss` or `GMT:h:MM:ss`
            multiLineCommentType: false, // use `/** */` instead of `//` as comment block
          },
          InjectByTag: {
            fileRegex: /\.+/,
            // regexp to find [AIV] tag inside html, if you tag contains unallowed characters you can adjust the regex
            // but also you can change [AIV] tag to anything you want
            AIVTagRegexp: /(\[AIV])(([a-zA-Z{} ,:;!()_@\-"'\\\/])+)(\[\/AIV])/g,
            dateFormat: 'h:MM:ss TT'
          }
        },
        LOGS_TEXT: {
          AIS_START: 'DEMO AIV started'
        }
      })
    ]
}

Inject by tag example

<body>
  <span>
    [AIV]{version}[/AIV]
  </span>
  <span>
    [AIV]{date}[/AIV]
  </span>
  <span>
    [AIV]{version}_{date}[/AIV]
  </span>
  <span>
    [AIV]V:{version} Date:{date}[/AIV]
  </span>
  <span>
    [AIV]Version {version} , {date}[/AIV]
  </span>
</body>

Available options

components.AutoIncreaseVersion

Auto increase package.json number. <br> This option requires extra argument to be sent to webpack build. <br> It happens before anything else to make sure that your new version is injected into your files.<br> Arguments: --env.major --env.minor --env.patch<br><br>

Example for package.json run type, npm run start => ( 1.2.10 to 2.0.0 )

 "version" : "1.2.10",
 "scripts": {
    "start": "webpack --env.major"
 }

To enable watch mode:

  plugins: [
    new WebpackAutoInject({
      ...
      components: {
        AutoIncreaseVersion: true,
        ...
      },
      componentsOptions: {
        AutoIncreaseVersion: {
          runInWatchMode: false // it will increase version with every single build!
        }
      }
    })
  ]

Default: true

components.InjectByTag

Inject version number into your file<br> Version will replace the <{version}> tag.<br>

<span>My awesome project | [AIV]{version}[/AIV]</span>

var version = '[AIV]{version}[/AIV]';

Default: true

components.InjectAsComment

This will inject your version as a comment into any css,js,html file.<br> You can change what is injected into the file by changing componentsOptions.InjectAsComment.tag. Currently only 2 tags are supported:

  ...
  plugins: [
    ...
    new WebpackAutoInject({
      PACKAGE_JSON_PATH: './package.json',
      components: {
        ...
        InjectAsComment: true
      },
      componentsOptions: {
        ...
        InjectAsComment: {
          tag: 'Build version: {version} - {date}', // default
          dateFormat: 'dddd, mmmm dS, yyyy, h:MM:ss TT', // default
          multiLineCommentType: false, // default
        }
    })
  ]

Default: true

Output-examples

AIV can inject version number for all your bundle files (css,js,html).<br><br>

// [AIV] Build version: 1.0.10
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};

<br><br> Example html:

<!-- [AIV] Build version: 1.0.10 -->
<!DOCTYPE html>
<html lang="en">

How to use with other webpack plugins

Webpack plugins order matters! Always try to put WebpackAutoInject as a first webpack plugin.

compression-webpack-plugin

  plugins: [
    new WebpackAutoInject(),
    new CompressionPlugin(),
  ]

uglifyjs-webpack-plugin

  plugins: [
    new WebpackAutoInject(),
    new UglifyJsPlugin(),
  ]

webpack.optimize.UglifyJsPlugin

If the order won't be enough, you can always add ignore to the uglifyJsPlugin to prevent stripping out AIV comments eg:

  new webpack.optimize.UglifyJsPlugin({
    ...
    output: {
      // prevent version info to be removed from bundle.js
      comments: /\[AIV\]/,
    },
    ...
  });

Change log

[1.2.2] - 27/10/2018

[1.2.1] - 27/10/2018

[1.2.0] - 27/10/2018

[1.1.0] - 15/03/2018

[1.0.0] - 25/08/2017

[0.5.14] - 12/04/2017

[0.5.13] - 12/04/2017

[0.5.12] - 12/04/2017