asset-inject-html-webpack-plugin

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

usage

In webpack.config.js:

1var HtmlWebpackPlugin = require('html-webpack-plugin')
2var AssetInjectHtmlWebpackPlugin = require('asset-inject-html-webpack-plugin')
3
4module.exports = {
5    plugins: [
6        // ...
7        new HtmlWebpackPlugin({
8            template: 'template.html',
9            filename: 'output.html'
10        }),
11        new AssetInjectHtmlWebpackPlugin({
12            assets: {
13                bootstrap: 'http://localhost/css/bootstrap.css',
14                jquery: 'http://localhost/js/jquery.js',
15                $find: function (name, type) { return 'http://example.com/assets/' + name + '.' + type }
16            },
17            texts: {
18                foo: 'var bar = {}; /* ... */',
19                base: 'h1 { color: red; } p { font-size: 24px; } /* ... */',
20                $find: function (name, type) { return type === 'js' ? getJsFile(name) : getCssFile(name) }
21            },
22            favicons: {
23                default: 'http://example.com/favicon.png'
24            }
25        })
26    ]
27}

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:

1<!-- 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.