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

Change Log

1.0.0 BREAKING CHANGES

Update to v1.0.0, refactor with new plugin API.

Legacy

0.2.0 Support multiple file hash extract in one chunk

0.1.0 First version

xsbear / hash-assets-webpack-plugin