Enhances html-webpack-plugin functionality by allowing you to specify js or css assets to be included.
When using a plugin such as copy-webpack-plugin you may have assets output to your build directory that are not detected/output by the html-webpack-plugin.
This plugin allows you to force some of these assets to be included in the output from html-webpack-plugin.
You must be running webpack on node 0.12.x or higher
Install the plugin with npm:
$ npm install --save-dev html-webpack-include-assets-plugin
Require the plugin in your webpack config:
var HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin');
Add the plugin to your webpack config as follows:
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackIncludeAssetsPlugin({ assets: [], append: true })
]
The available options are:
-
assets
:string
orarray
Assets that will be output into your html-webpack-plugin template.
Only assets ending in
.js
or.css
are supported. The presence of assets that do not end in these extensions will cause an error. -
append
:boolean
Specifying whether the assets should be prepended (
false
) before any existing assets, or appended (true
) after them. -
publicPath
:boolean
orstring
Specifying whether the assets should be prepended with webpack's public path or a custom publicPath (
string
).A value of
false
may be used to disable prefixing with webpack's publicPath, or a value likemyPublicPath/
may be used to prefix all assets with the given string. Default istrue
. -
hash
:boolean
Specifying whether the assets should be appended with webpack's compilation hash. This is useful for cache busting. Default is
false
.
Using HtmlWebpackIncludeAssetsPlugin
and CopyWebpackPlugin
to include assets to html-webpack-plugin
template :
plugins: [
new CopyWebpackPlugin([
{ from: 'node_modules/bootstrap/dist/css', to: 'css/'},
{ from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'}
]),
new HtmlWebpackPlugin(),
new HtmlWebpackIncludeAssetsPlugin({
assets: ['css/bootstrap.min.css', 'css/bootstrap-theme.min.css'],
append: false
})
]
Appending and prepending at the same time :
plugins: [
new CopyWebpackPlugin([
{ from: 'node_modules/bootstrap/dist/css', to: 'css/'},
{ from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'}
]),
new HtmlWebpackPlugin(),
new HtmlWebpackIncludeAssetsPlugin({
assets: ['css/bootstrap.min.css', 'css/bootstrap-theme.min.css'],
append: false
}),
new HtmlWebpackIncludeAssetsPlugin({
assets: ['css/custom.css'],
append: true
})
]
Using custom publicPath
:
plugins: [
new CopyWebpackPlugin([
{ from: 'node_modules/bootstrap/dist/css', to: 'css/'},
{ from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'}
]),
new HtmlWebpackPlugin(),
new HtmlWebpackIncludeAssetsPlugin({
assets: ['css/bootstrap.min.css', 'css/bootstrap-theme.min.css'],
append: false,
publicPath: 'myPublicPath/'
})
]
Using hash
option :
plugins: [
new CopyWebpackPlugin([
{ from: 'node_modules/bootstrap/dist/css', to: 'css/'},
{ from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'}
]),
new HtmlWebpackPlugin(),
new HtmlWebpackIncludeAssetsPlugin({
assets: ['css/bootstrap.min.css', 'css/bootstrap-theme.min.css'],
append: false,
hash: true
})
]