npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

webpack-auto-inject-version-with-fix

v1.0.5

Published

Webpack plugin for auto inject version from package.json

Downloads

7

Readme

Auto inject version - Webpack plugin

Adds version from package.json into every single file as top comment block. forked from webpack-auto-inject-version-with-fix

Install

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

Table of Contents

What it does How to use Available options Output examples Change log

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 )

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({
        NAME: 'AIV custom name',
        SHORT: 'CUSTOM',
        SILENT: false,
        PACKAGE_JSON_PATH: './package.json',
        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'
          },
          InjectByTag: {
            fileRegex: /\.+/,
            dateFormat: 'h:MM:ss TT'
          }
        },
        LOGS_TEXT: {
          AIS_START: 'DEMO AIV started'
        }
      })
    ]
}

Inject by tag example

<body>
  <span>
    [AIV]{version}(fix-version)[/AIV]
  </span>
  <span>
    [AIV]{date}[/AIV]
  </span>
  <span>
    [AIV]{version}_{date}[/AIV]
  </span>
  <span>
    [AIV]V:{version} Date:{date}[/AIV]
  </span>
</body>

Available options

components.AutoIncreaseVersion

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

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 Version will replace the <{version}> tag.

<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. 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:
  ...
  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
        }
    })
  ]

Default: true

Output-examples

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

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

Example html:

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

Change log

[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