Gathering detailed insights and metrics for html-webpack-tags-plugin
Gathering detailed insights and metrics for html-webpack-tags-plugin
lets you define html tags to inject with html-webpack-plugin
Installations
npm install html-webpack-tags-pluginDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Min. Node Version
>=10
Releases
21
Languages
1
JavaScript
JavaScript (100%)
Developer
jharris4
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
257 Stars
296 Commits
31 Forks
2 Watchers
10 Branches
11 Contributors
Updated on May 13, 2025
Maintainers
1
Package Meta Information
Latest Version
3.0.2
Package Id
html-webpack-tags-plugin@3.0.2
Unpacked Size
73.04 kB
Size
16.46 kB
File Count
8
Published on
Oct 30, 2021
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
2
Include Assets extension for the HTML Webpack Plugin
This is the README.md from version 1.x which provides support for ** Node < 8.6 **.
This version is deprecated in favour of [https://github.com/jharris4/html-webpack-include-assets-plugin](html-webpack-include-assets-plugin version 2).
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 8.x or higher
Install the plugin with npm:
1$ npm install --save-dev html-webpack-include-assets-plugin
Basic Usage
Require the plugin in your webpack config:
1var HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin');
Add the plugin to your webpack config:
1output: { 2 publicPath: '/abc/' 3}, 4plugins: [ 5 new HtmlWebpackPlugin(), 6 new HtmlWebpackIncludeAssetsPlugin({ assets: ['a.js', 'b.css'], append: true }) 7]
Which will generate html like this:
1<head> 2 <!-- other head content --> 3 <link rel="stylesheet" href="/abc/b.css"/> 4</head> 5<body> 6 <!-- other body content --> 7 <script type="text/javascript" src="/abc/a.js"></script> 8</body>
Options
The available options are:
-
jsExtensions:stringorarraySpecifies the file extensions to use to determine if assets are script assets. Default is
['.js']. -
cssExtensions:stringorarraySpecifies the file extensions to use to determine if assets are style assets. Default is
['.css']. -
assets:stringorarrayorobjectAssets that will be output into your html-webpack-plugin template.
To specify just one asset, simply pass a string or object. To specify multiple, pass an array of strings or objects.
If the asset path is static and ends in one of the
jsExtensionsorcssExtensionsvalues, simply use a string value.If the asset is not static or does not have a valid extension, you can instead pass an object with properties
path(required) andtypeorgloborglobPathorattributes(optional). In this casepathis the asset href/src,typeis one ofjsorcss, andglobis a wildcard to use to match all files in the path (uses the glob package). TheglobPathcan be used to specify the directory from which theglobshould search for filename matches (the default is to usepathwithin webpack's output directory).The
attributesproperty may be used to add additional attributes to the link or script element that is injected. The keys of this object are attribute names and the values are the attribute values (string or boolean key values are allowed).The
assetPathproperty may be used to specify the full path to the included asset. This can be useful as it will trigger a recompilation after the assets have changed when usingwebpack-dev-serverorwebpack-dev-middlewarein development mode. -
append:booleanSpecifying whether the assets should be prepended (
false) before any existing assets, or appended (true) after them. -
resolvePaths:booleanSpecifying whether the asset paths should be resolved with
path.resolve(i.e. made absolute). -
publicPath:booleanorstringSpecifying whether the assets should be prepended with webpack's public path or a custom publicPath (
string).A value of
falsemay 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:booleanorfunction(assetName, hash)Specifying whether the assets should be appended with webpack's compilation hash. This is useful for cache busting. Default is
false. -
files:stringorarrayFiles 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 (uses the minimatch package).
cssAssets:array
Optional shortcut for adding css assets. An array of css asset objects.
See the cssAssets example below for the syntax of css asset object.
Example
Using HtmlWebpackIncludeAssetsPlugin and CopyWebpackPlugin to include assets to html-webpack-plugin template :
1plugins: [ 2 new CopyWebpackPlugin([ 3 { from: 'node_modules/bootstrap/dist/css', to: 'css/'}, 4 { from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'} 5 ]), 6 new HtmlWebpackPlugin(), 7 new HtmlWebpackIncludeAssetsPlugin({ 8 assets: ['css/bootstrap.min.css', 'css/bootstrap-theme.min.css'], 9 append: false 10 }) 11]
Appending and prepending at the same time :
1plugins: [ 2 new CopyWebpackPlugin([ 3 { from: 'node_modules/bootstrap/dist/css', to: 'css/'}, 4 { from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'} 5 ]), 6 new HtmlWebpackPlugin(), 7 new HtmlWebpackIncludeAssetsPlugin({ 8 assets: ['css/bootstrap.min.css', 'css/bootstrap-theme.min.css'], 9 append: false 10 }), 11 new HtmlWebpackIncludeAssetsPlugin({ 12 assets: ['css/custom.css'], 13 append: true 14 }) 15]
Using custom jsExtensions :
1plugins: [ 2 new HtmlWebpackPlugin(), 3 new HtmlWebpackIncludeAssetsPlugin({ 4 assets: ['dist/output.js', 'lib/content.jsx'], 5 append: false, 6 jsExtensions: ['.js', '.jsx'] 7 }) 8]
Using custom publicPath :
1plugins: [ 2 new CopyWebpackPlugin([ 3 { from: 'node_modules/bootstrap/dist/css', to: 'css/'}, 4 { from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'} 5 ]), 6 new HtmlWebpackPlugin(), 7 new HtmlWebpackIncludeAssetsPlugin({ 8 assets: ['css/bootstrap.min.css', 'css/bootstrap-theme.min.css'], 9 append: false, 10 publicPath: 'myPublicPath/' 11 }) 12]
Or to include assets without prepending the publicPath:
1plugins: [ 2 new HtmlWebpackPlugin(), 3 new HtmlWebpackIncludeAssetsPlugin({ 4 assets: ['css/no-public-path.min.css', 'http://some.domain.com.js'], 5 append: false, 6 publicPath: false 7 }) 8]
Manually specifying asset types :
1plugins: [ 2 new CopyWebpackPlugin([ 3 { from: 'node_modules/bootstrap/dist/css', to: 'css/'}, 4 { from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'} 5 ]), 6 new HtmlWebpackPlugin(), 7 new HtmlWebpackIncludeAssetsPlugin({ 8 assets: [ 9 '/css/bootstrap.min.css', 10 '/css/bootstrap-theme.min.css', 11 { path: 'https://fonts.googleapis.com/css?family=Material+Icons', type: 'css' } 12 ], 13 append: false, 14 publicPath: '' 15 }) 16]
Adding custom attributes to asset tags :
The bootstrap-theme link tag will be given an id="bootstrapTheme" attribute.
1plugins: [ 2 new CopyWebpackPlugin([ 3 { from: 'node_modules/bootstrap/dist/css', to: 'css/'}, 4 { from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'} 5 ]), 6 new HtmlWebpackPlugin(), 7 new HtmlWebpackIncludeAssetsPlugin({ 8 assets: [ 9 '/css/bootstrap.min.css', 10 { path: '/css/bootstrap-theme.min.css', attributes: { id: 'bootstrapTheme' } } 11 ], 12 append: false, 13 publicPath: '' 14 }) 15]
Using hash option :
When the hash option is set to true, asset paths will be appended with a hash query parameter (?hash=<the_hash>)
1plugins: [ 2 new CopyWebpackPlugin([ 3 { from: 'node_modules/bootstrap/dist/css', to: 'css/'}, 4 { from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'} 5 ]), 6 new HtmlWebpackPlugin(), 7 new HtmlWebpackIncludeAssetsPlugin({ 8 assets: ['css/bootstrap.min.css', 'css/bootstrap-theme.min.css'], 9 append: false, 10 hash: true 11 }) 12]
When the hash option is set to a function, asset paths will be replaced with the result of executing that function
1plugins: [ 2 new CopyWebpackPlugin([ 3 { from: 'somepath/somejsfile.js', to: 'js/somejsfile.[hash].js' }, 4 { from: 'somepath/somecssfile.css', to: 'css/somecssfile.[hash].css' } 5 ]), 6 new HtmlWebpackPlugin(), 7 new HtmlWebpackIncludeAssetsPlugin({ 8 assets: [{ path: 'js', glob: '*.js', globPath: 'somepath' }], 9 assets: [{ path: 'css', glob: '*.css', globPath: 'somepath' }], 10 append: false, 11 hash: function(assetName, hash) { 12 assetName = assetName.replace(/\.js$/, '.' + hash + '.js'); 13 assetName = assetName.replace(/\.css$/, '.' + hash + '.css'); 14 return assetName; 15 } 16 }) 17]
Specifying specific files
1plugins: [ 2 new CopyWebpackPlugin([ 3 { from: 'node_modules/bootstrap/dist/css', to: 'css/'}, 4 { from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'} 5 ]), 6 new HtmlWebpackPlugin({ 7 filename: 'a/index.html' 8 }), 9 new HtmlWebpackPlugin({ 10 filename: 'b/index.html' 11 }), 12 new HtmlWebpackIncludeAssetsPlugin({ 13 files: ['a/**/*.html'], 14 assets: ['css/a.css'], 15 append: true 16 }), 17 new HtmlWebpackIncludeAssetsPlugin({ 18 files: ['b/**/*.html'], 19 assets: ['css/b.css'], 20 append: true 21 }) 22]
Specifying assets usings a glob
Note that since copy-webpack-plugin does not actually copy the files to webpack's output directory until after html-webpack-plugin has completed, it is necessary to use the globPath to retrieve filename matches relative to the original location of any such files.
1plugins: [ 2 new CopyWebpackPlugin([ 3 { from: 'node_modules/bootstrap/dist/css', to: 'css/'}, 4 { from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'} 5 ]), 6 new HtmlWebpackPlugin(), 7 new HtmlWebpackIncludeAssetsPlugin({ 8 assets: [{ path: 'css', glob: '*.css', globPath: 'node_modules/bootstrap/dist/css/' }], 9 append: true 10 }) 11]
Specifying cssAssets (a shortcut for specifying assets of type css)
1output: { 2 publicPath: '/my-public-path/' 3}, 4plugins: [ 5 new CopyWebpackPlugin([ 6 { from: 'node_modules/bootstrap/dist/css', to: 'css/'}, 7 { from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'} 8 ]), 9 new HtmlWebpackPlugin(), 10 new HtmlWebpackIncludeAssetsPlugin({ 11 assets: [], 12 append: true, 13 cssAssets: [ 14 { 15 href: 'asset/path', 16 attributes: { 17 rel: 'icon' 18 } 19 }, 20 { 21 href: '/absolute/asset/path', 22 asset: false, 23 attributes: { 24 rel: 'manifest' 25 } 26 } 27 ] 28 }) 29]
Will append the following link elements into the index template html
1<head> 2 <!-- previous header content --> 3 <link rel="icon" href="/my-public-path/asset/path"/> 4 <link rel="manifest" href="/absolute/asset/path"/> 5</head>
Note that the second cssAsset's href was not prefixed with the webpack publicPath because csAsset.asset was set to false.
Caveats
Some users have encountered issues with plugin ordering.
- It is advisable to always place any
HtmlWebpackPluginplugins before anyHtmlWebpackIncludeAssetsPluginplugins in your webpack config.
This plugin has only been tested with two instances in one webpack config, where one had option.append: false and the other had option.append: true.
- It is not recommended to use more than one instance of this plugin in one webpack config unless using the above configuration.
Changing HtmlWebpackPlugin.options.inject from its default value may cause issues.
- This plugin requires
HtmlWebpackPlugin.options.injectto betrue(it defaults to true if undefined) for attribute injection to work.
If you setup your webpack config to have HtmlWebpackPlugin.options.inject: false like this:
1output: { 2 publicPath: '/the-public-path/' 3}, 4plugins: [ 5 new HtmlWebpackPlugin({ inject: false }), 6 new HtmlWebpackIncludeAssetsPlugin({ 7 assets: [{ path: 'css/bootstrap-theme.min.css', attributes: { id: 'bootstrapTheme' } }], 8 links: [{ href: 'the-ref', attributes: { rel: 'icon' } }], 9 append: true 10 }) 11]
You will need to add the following to your template index.html to get assets to be generated:
1<head> 2 <!-- other head content --> 3 <% for (var cssIndex = 0; cssIndex < htmlWebpackPlugin.files.css.length; cssIndex++) { %> 4 <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[cssIndex] %>"> 5 <% } %> 6</head> 7<body> 8 <!-- other body content --> 9 <% for (var jsIndex = 0; jsIndex < htmlWebpackPlugin.files.js.length; jsIndex++) { %> 10 <script src="<%= htmlWebpackPlugin.files.js[jsIndex] %>"></script> 11 <% } %> 12</body>
Using the (lodash) template syntax like this for css and js files is necessary when you turn injection off.
But, the template syntax does not allow injection of more than one attribute value.
This means it will generate an index.html that looks like this:
1<head> 2 <link rel="stylesheet" href="/the-public-path/css/bootstrap-theme.min.css"> 3 <link rel="stylesheet" href="/the-public-path/the-ref"> 4</head>
None of the link elements have any of the attributes we specified for the assets or links.
This is because HtmlWebpackPlugin.options.inject needs to be set to true for attributes injection to work.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 2/28 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 4 are checked with a SAST tool
Reason
29 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
- Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
1.7
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More