hash-assets-webpack-plugin

    1.0.0 • Public • Published

    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

    Install

    npm i hash-assets-webpack-plugin

    DownloadsWeekly Downloads

    695

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    22 kB

    Total Files

    20

    Last publish

    Collaborators

    • xsbear