Webpack Version File Plugin

Plugin for Webpack which allows you to generate a static version file that can be deployed. Inspired by morficus/version-file

Use case

This plugin can be used to automatically let Webpack generate a file containing version information, based on the information in your NPM package.json.

Can be used to let your webapp detect when a new version is available.

Sample outfile file content

{
	"version" : {
		"name":      "My AngularJS App",
		"buildDate": "Mon Nov 23 2015 14:26:25 GMT+0100 (CET)",
		"version":   "5.37.0"
	}
}

Available config options:

outputFile: the path and filename of where to store the output
template: path to your template
templateString: an EJS template string
packageFile: path to your package.json.
extras: {}: an object for any extra information you want to use in your template

Templating

This modules uses EJS as its templating system. As indicated in the config options section, you can utilize your own template by either (a) passing in a path to an external file or (b) typing the template in-line.

The available options are:

package: contains all keys of your package.json
buildDate: a human-readable time stamp
extras: an object containing any custom / additional data that is needed in the template

Sample Webpack Configuration:

var path = require('path'),
    webpack = require("webpack"),
    libPath = path.join(__dirname, 'src'),
    wwwPath = path.join(__dirname, 'www'),
    pkg = require('./package.json'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
	VersionFile = require('webpack-version-file-plugin'),




module.exports = {
    entry: path.join(libPath, 'index.js'),
    output: {
        path: path.join(wwwPath),
        filename: 'bundle-[hash:6].js'
    },
    module: {
        loaders: [
			{
	            test: /\.html$/,
	            loader: 'file?name=templates/[name]-[hash:6].html'
	        }, {
	            test: /\.(png|jpg)$/,
	            loader: 'file?name=img/[name].[ext]'
	        }, {
	            test: /\.css$/,
	            loader: "style!css"
	        }
		]
    },
    resolve: {
        root: [path.join(__dirname, "src/libs")]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            pkg: pkg,
            template: path.join(libPath, 'index.html')
        }),
		new VersionFile({
			packageFile:path.join(__dirname, 'package.json'),
			template: path.join(__dirname, 'version.ejs'),
			outputFile: path.join(wwwPath, 'version.json')
		})
	],
    externals: {
    }
};

Sample NPM Configuration:

Adding a script which will automatically update the version before building.

{
  "name": "My AngularJS App",
  "version": "17.1.0",
  "description": "App descriptions",
  "author": "...",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npm version minor && rm -rf www/* && webpack",
    "devserver": "webpack-dev-server --port 9100 --progress --colors --no-minimize"
  }
  ... etc
}

Usage npm run-script build

cbuschka / webpack-version-file-plugin Goto Github PK