hash-assets-webpack-plugin

Get chunks hash from webpack stats and extracted assets from dynamic templates, emits a json file with all assets hash.

Why is this useful?

This plug-in outputs a json file with the hash map of the generated webpack assets(chunks).

And it could extracted assets from giving dynamic templates to the output dir, like Php templates, JSP.

Example output:

The output is a JSON object in the form:

{
    "js/main.js": "bc675f6",
    "css/main.css": "bc675f6",
    "js/commons.js": "5d32ba5"
}

Install

npm install hash-assets-webpack-plugin --save-dev

Configuration

In your webpack config include the plug-in. And add it to your config:

var path = require('path');
var HashAssetsPlugin = require('hash-assets-webpack-plugin');
 
module.exports = {
    // ...
    output: {
        path: path.join(__dirname, "static"),
        filename: "js/[name].[chunkhash].js",
        publicPath: "/static/"
    },
    // ....
    plugins: [
        new HashAssetsPlugin({
            path: './static',
            chunkNameTemplate: 'js/[name].js',
            hashLength: 7,
            srcPath: './src',
            srcMatch: {
                'home.tpl': /['"]([^'"]+\.(?:png|jpg))['"]/gi
            },
            assetMatch: {
                css: /\(['"]?([^\(\)]+\.(?:gif|png|jpg))['"]?\)/gi
            },
            assetNameTemplate: '[name].[hash]',
            prettyPrint: true
        })
    ]
};

Options

You can pass the following options:

filename: Name for the created json file. Defaults to assets-hash.json

new AssetsPlugin({filename: 'assets.json'})

path: Path where to output extracted assets. Defaults to the webpack output.path.

new AssetsPlugin({path: './static'})

prettyPrint: Whether to format the json output for readability. Defaults to false.

new AssetsPlugin({prettyPrint: true})

keyTemplate: [String|Function] asset key name in hash json file.

new AssetsPlugin({
    // default value
    keyTemplate: 'js/[name].js',
    // or a function, give filename of generated chunk as param, like 'js/main.9959c21.js',
    // the form is specified by chunkFilename config of webpack
    keyTemplate: function (filename) {
        var match = /(js|css)\/([\w\-]+)\.\w{7}\.\1/.exec(filename);
        return match[1] + '/' + match[2] + '.' + match[1];
    },
})

hashLength: Length of hash.

new AssetsPlugin({hashLength: 7})

srcPath

srcMatch

assetMatch

assetNameTemplate

Using this with Php

Changelog

0.2.0 Support multiple file hash extract in one chunk

0.1.0 First version