# webpack-auto-inject-version

> Webpack plugin for auto inject version from package.json

Latest version **1.2.2** (published 2018-10-27) · ISC license · 0 weekly downloads

## Install

```sh
npm install webpack-auto-inject-version
pnpm add webpack-auto-inject-version
yarn add webpack-auto-inject-version
bun add webpack-auto-inject-version
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2018-10-27 |
| First published | 2016-10-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 292.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 71 |
| Author | Radoslaw Swiat |
| Maintainers | radswiat |

## Links

- npm: https://www.npmjs.com/package/webpack-auto-inject-version
- Repository: https://github.com/radswiat/webpack-auto-inject-version
- Homepage: https://github.com/radswiat/webpack-auto-inject-version#readme
- Issues: https://github.com/radswiat/webpack-auto-inject-version/issues
- npm.io page: https://npm.io/package/webpack-auto-inject-version

## Recent versions

- 1.2.2 (latest) — 2018-10-27
- 1.2.1 — 2018-10-27
- 1.2.0 — 2018-10-27
- 1.1.0 — 2018-03-15
- 1.0.0 — 2017-08-25
- 0.5.14 — 2017-05-18
- 0.5.13 — 2017-04-12
- 0.5.12 — 2017-04-12
- 0.5.11 — 2017-04-12
- 0.5.10 — 2017-04-12
- 0.5.5 — 2017-04-12
- 0.5.4 — 2017-04-12
- 0.5.3 — 2017-04-12
- 0.5.1 — 2017-04-10
- 0.5.0 — 2017-04-10
- … 17 more at https://npm.io/package/webpack-auto-inject-version/versions

## README

# Auto inject version - Webpack plugin
Adds version from package.json into every single file as top comment block.

# Install

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

# Table of Contents
[What it does](#user-content-what-it-does) <br>
[How to use](#user-content-how-to-use) <br>
[Available options](#user-content-available-options) <br>
[Output examples](#user-content-output-examples)
[How to use with other webpack plugins](#user-content-how-to-use-with-other-webpack-plugins)<br>
[Change log](#user-content-change-log)<br>

# What it does
Auto Inject Version (AIV) can:
- inject version from package.json into every bundle file as a comment ( at the top )
- inject version from package.json into any place in your HTML by special tag `[AIV]{version}[/AIV]`
- inject version from package.json into any place in CSS/JS file by special tag `[AIV]{version}[/AIV]`
- auto increase package.json version by --env.major, --env.minor, --env.patch passed into webpack

# How to use
It's easy to set it up, all you need is:
* use WebpackAutoInject in webpack plugins
* pass config as a parameter, or leave it blank as all options are "on" by default.

### Simple config example ( in webpack.conf.js )
```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 )
```json
 "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>
```html
<span>My awesome project | [AIV]{version}[/AIV]</span>
```
```js
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:
* {version}
* {date} ( current date )
Example:
``` javascript
  ...
  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>
```js
// [AIV] Build version: 1.0.10
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
```
<br><br>
Example html:
```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
- add PACKAGE_JSON_INDENT @trevyn
## [1.2.1] - 27/10/2018
- security updates
## [1.2.0] - 27/10/2018
- inject as comment will no more be a version behind with auto increase version
- inject as comment can now switched to multiline comment type eg /** */
- added support for npm log levels eg `npm start -s` will disable console logs
- unit tests added inside the `demo` folder, `npm run test`
## [1.1.0] - 15/03/2018
- webpack sync apply
- "name" has been removed as not used anyway, use SHORT instead
- eslint changes
- InjectByTag - AIVTagRegexp exposed in config to allow [AIV] tag modifications
- comma fix in InjectByTag regexp
- query has on filename has been fixed
## [1.0.0] - 25/08/2017
- Date format can now be specified for InjectAsComment
- Date format can now be specified for InjectByTag
- Webpack WATCH support added
- Root SILENT option added
- Minor fixes
## [0.5.14] - 12/04/2017
- Remove babel polyfills from webpack build as it was causing issues if babel was already used in project
## [0.5.13] - 12/04/2017
- Tag from InjectAsComment can now be configured by options ( componentsOptions.InjectAsComment.tag )
- Default tag template for InjectAsComment has change
## [0.5.12] - 12/04/2017
- Fix dependency missing issue
- Remove export as object with .default as a class

---
_Source: https://npm.io/package/webpack-auto-inject-version · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._