asset-inject-html-webpack-plugin

Inject assets into HTML template, extension plugin of the webpack plugin html-webpack-plugin.

usage

In webpack.config.js:

var HtmlWebpackPlugin = require('html-webpack-plugin')
var AssetInjectHtmlWebpackPlugin = require('asset-inject-html-webpack-plugin')

module.exports = {
    plugins: [
        // ...
        new HtmlWebpackPlugin({
            template: 'template.html',
            filename: 'output.html'
        }),
        new AssetInjectHtmlWebpackPlugin({
            assets: {
                bootstrap: 'http://localhost/css/bootstrap.css',
                jquery: 'http://localhost/js/jquery.js',
                $find: function (name, type) { return 'http://example.com/assets/' + name + '.' + type }
            },
            texts: {
                foo: 'var bar = {}; /* ... */',
                base: 'h1 { color: red; } p { font-size: 24px; } /* ... */',
                $find: function (name, type) { return type === 'js' ? getJsFile(name) : getCssFile(name) }
            },
            favicons: {
                default: 'http://example.com/favicon.png'
            }
        })
    ]
}

inject-point

To inject asset, just put comment tag like <!-- css_inject_point --> in your HTML template file.

main type

• js_inject_point
• css_inject_point
• favicon_inject_point

sub type

Js and css inject points, have sub-type:

• chunk: <!-- js_inject_point chunk_index -->
• inline: <!-- js_inject_point inline_bar -->
• asset: <!-- js_inject_point asset_jquery -->
• text: <!-- js_inject_point text_foo -->

Favicon inject points can have a optional name:

<!-- favicon_inject_point example -->

If not set, use options favicons.default as the favicon path.

conditional replace

e.g. <!-- js_inject_point asset_test if_local --> only do replace when options.args.local is true value.

demo

See test/webpack.config.js.