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:

1{
2    "js/main.js": "bc675f6",
3    "css/main.css": "bc675f6",
4    "js/commons.js": "5d32ba5"
5}

Install

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

Configuration

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

1var path = require('path');
2var HashAssetsPlugin = require('hash-assets-webpack-plugin');
3
4module.exports = {
5    // ...
6    output: {
7        path: path.join(__dirname, "static"),
8        filename: "js/[name].[chunkhash].js",
9        publicPath: "/static/"
10    },
11    // ....
12    plugins: [
13        new HashAssetsPlugin({
14            path: './static',
15            chunkNameTemplate: 'js/[name].js',
16            hashLength: 7,
17            srcPath: './src',
18            srcMatch: {
19                'home.tpl': /['"]([^'"]+\.(?:png|jpg))['"]/gi
20            },
21            assetMatch: {
22                css: /\(['"]?([^\(\)]+\.(?:gif|png|jpg))['"]?\)/gi
23            },
24            assetNameTemplate: '[name].[hash]',
25            prettyPrint: true
26        })
27    ]
28};

Options

You can pass the following options:

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

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

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

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

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

1new AssetsPlugin({prettyPrint: true})

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

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

hashLength: Length of hash.

1new 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