Include Assets extension for the HTML Webpack Plugin
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.
Installation
You must be running webpack on node 4.x or higher
Install the plugin with npm:
$ npm install --save-dev html-webpack-include-assets-plugin
Basic Usage
Require the plugin in your webpack config:
var HtmlWebpackIncludeAssetsPlugin = ;
Add the plugin to your webpack config as follows:
plugins: assets: append: true
Options
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
. -
files
:string
orarray
Files that the assets will be added to.
By default the assets will be included in all files. If files are defined, the assets will only be included in specified file globs.
Example
Using HtmlWebpackIncludeAssetsPlugin
and CopyWebpackPlugin
to include assets to html-webpack-plugin
template :
plugins: from: 'node_modules/bootstrap/dist/css' to: 'css/' from: 'node_modules/bootstrap/dist/fonts' to: 'fonts/' assets: 'css/bootstrap.min.css' 'css/bootstrap-theme.min.css' append: false
Appending and prepending at the same time :
plugins: from: 'node_modules/bootstrap/dist/css' to: 'css/' from: 'node_modules/bootstrap/dist/fonts' to: 'fonts/' assets: 'css/bootstrap.min.css' 'css/bootstrap-theme.min.css' append: false assets: 'css/custom.css' append: true
Using custom publicPath
:
plugins: from: 'node_modules/bootstrap/dist/css' to: 'css/' from: 'node_modules/bootstrap/dist/fonts' to: 'fonts/' assets: 'css/bootstrap.min.css' 'css/bootstrap-theme.min.css' append: false publicPath: 'myPublicPath/'
Using hash
option :
plugins: from: 'node_modules/bootstrap/dist/css' to: 'css/' from: 'node_modules/bootstrap/dist/fonts' to: 'fonts/' assets: 'css/bootstrap.min.css' 'css/bootstrap-theme.min.css' append: false hash: true
Specifying specific files
plugins: from: 'node_modules/bootstrap/dist/css' to: 'css/' from: 'node_modules/bootstrap/dist/fonts' to: 'fonts/' filename: 'a/index.html' filename: 'b/index.html' files: 'a/**/*.html' assets: 'css/a.css' append: true files: 'b/**/*.html' assets: 'css/b.css' append: true