Gathering detailed insights and metrics for add-asset-html-webpack-plugin
Gathering detailed insights and metrics for add-asset-html-webpack-plugin
Add a JavaScript or CSS asset to the HTML generated by html-webpack-plugin
Installations
npm install add-asset-html-webpack-pluginDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
^16.13.0 || ^18.12.0 || >=20.0.0
Node Version
18.16.0
NPM Version
8.19.4
Releases
31
Languages
1
JavaScript
JavaScript (100%)
Developer
SimenB
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
336 Stars
416 Commits
41 Forks
6 Watchers
8 Branches
15 Contributors
Updated on Apr 28, 2025
Maintainers
1
Package Meta Information
Latest Version
6.0.0
Package Id
add-asset-html-webpack-plugin@6.0.0
Unpacked Size
19.76 kB
Size
6.47 kB
File Count
6
NPM Version
8.19.4
Node Version
18.16.0
Published on
May 09, 2023
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
add-asset-html-webpack-plugin
Add a JavaScript or CSS asset to the HTML generated by
html-webpack-plugin
Installation
Install the plugin with npm:
1$ npm i add-asset-html-webpack-plugin -D
NOTE: This plugin requires html-webpack-plugin@^3, html-webpack-plugin@^4,
or html-webpack-plugin@^5.
Basic Usage
The plugin will add the given JS or CSS file to the files Webpack knows about,
and put it into the list of assets html-webpack-plugin injects into the
generated html. Add the plugin to your config, providing it a filepath:
1const HtmlWebpackPlugin = require('html-webpack-plugin'); 2const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin'); 3const webpackConfig = { 4 entry: 'index.js', 5 output: { 6 path: 'dist', 7 filename: 'index_bundle.js', 8 }, 9 plugins: [ 10 new HtmlWebpackPlugin(), 11 new AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') }), 12 ], 13};
This will add a script tag to the HTML generated by html-webpack-plugin, and
look like:
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Webpack App</title> 6 </head> 7 <body> 8 <script src="index_bundle.js"></script> 9 <script src="some-file.js"></script> 10 </body> 11</html>
NOTE: You can also pass an array of assets to be added. Same API as mentioned below, just pass multiple objects as an array.
1new AddAssetHtmlPlugin([ 2 { filepath: require.resolve('./some-file') }, 3 { filepath: require.resolve('./some-other-file') }, 4 // Glob to match all of the dll file, make sure to use forward slashes on Windows 5 { glob: require.resolve('./**/*.dll.js') }, 6]);
Options
Options are passed to the plugin during instantiation.
1new AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') });filepath
Type: string, mandatory unless glob is defined
The absolute path of the file you want to add to the compilation, and resulting HTML file.
glob
Type: string, mandatory unless filepath is defined
A glob used to locate files to add to the compilation. See
globby's docs for how to use it.
files
Type: string|Array<string>, default `[]
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.
hash
Type: boolean, default: false
If true, will append a unique hash of the file to the filename. This is useful
for cache busting.
includeRelatedFiles
Type: boolean, default: true
If true, will add filepath + '.*' to the compilation as well. E.g
filepath.map and filepath.gz.
outputPath
Type: string
If set, will be used as the output directory of the file.
publicPath
Type: string
If set, will be used as the public path of the script or link tag.
typeOfAsset
Type: string, default: js
Can be set to css to create a link-tag instead of a script-tag.
attributes
Type: object, default: {}
Extra attributes to be added to the generated tag. Useful to for instance add
nomodule to a polyfill script. The attributes object uses the key as the
name of the attribute, and the value as the value of it. If value is simply
true no value will be added.
An example of this is included in the repository.
Currently only supports script tags.
Examples
When adding assets, it's added to the start of the array, so when
html-webpack-plugin injects the assets, it's before other assets. If you
depend on some order for the assets beyond that, and ordering the plugins
doesn't cut it, you'll have to create a custom template and add the tags
yourself.
Add a DLL file from webpack.DllPlugin
Note: Remember to build the DLL file in a separate build.
See example for an example of how to set it up. You can run it
by cloning this repo, running yarn followed by yarn run example.
Webpack config
1const path = require('path'); 2const webpack = require('webpack'); 3const webpackConfig = { 4 entry: { 5 vendor: ['react', 'redux', 'react-router'], 6 }, 7 devtool: '#source-map', 8 output: { 9 path: path.join(__dirname, 'build'), 10 filename: '[name].dll.js', 11 library: '[name]_[hash]', 12 }, 13 plugins: [ 14 new webpack.DllPlugin({ 15 path: path.join(__dirname, 'build', '[name]-manifest.json'), 16 name: '[name]_[hash]', 17 }), 18 ], 19};
Your main build:
1const path = require('path'); 2const webpack = require('webpack'); 3const HtmlWebpackPlugin = require('html-webpack-plugin'); 4const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin'); 5const webpackConfig = { 6 entry: 'index.js', 7 output: { 8 path: 'dist', 9 filename: 'index_bundle.js', 10 }, 11 plugins: [ 12 new webpack.DllReferencePlugin({ 13 context: path.join(__dirname), 14 manifest: require('./build/vendor-manifest.json'), 15 }), 16 new HtmlWebpackPlugin(), 17 new AddAssetHtmlPlugin({ 18 filepath: path.resolve(__dirname, './build/*.dll.js'), 19 }), 20 ], 21};
Add a polyfill file you have locally
See example for an example of how to use it. You can run it
by cloning this repo, running yarn followed by yarn run example.
Webpack config
1const path = require('path'); 2const HtmlWebpackPlugin = require('html-webpack-plugin'); 3const AddAssetHtmlPlugin = require('../../'); 4 5const webpackConfig = { 6 entry: 'entry.js', 7 devtool: '#source-map', 8 mode: 'development', 9 output: { 10 path: 'dist', 11 filename: 'index_bundle.js', 12 }, 13 plugins: [ 14 new HtmlWebpackPlugin(), 15 new AddAssetHtmlPlugin({ 16 filepath: path.resolve(__dirname, './polyfill.js'), 17 attributes: { 18 nomodule: true, 19 }, 20 }), 21 ], 22};
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
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
3 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
Reason
3 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 2
Reason
Found 0/26 approved changesets -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/node.js.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/SimenB/add-asset-html-webpack-plugin/node.js.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/SimenB/add-asset-html-webpack-plugin/node.js.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/node.js.yml:45: update your workflow using https://app.stepsecurity.io/secureworkflow/SimenB/add-asset-html-webpack-plugin/node.js.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:59: update your workflow using https://app.stepsecurity.io/secureworkflow/SimenB/add-asset-html-webpack-plugin/node.js.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/SimenB/add-asset-html-webpack-plugin/node.js.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:76: update your workflow using https://app.stepsecurity.io/secureworkflow/SimenB/add-asset-html-webpack-plugin/node.js.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:77: update your workflow using https://app.stepsecurity.io/secureworkflow/SimenB/add-asset-html-webpack-plugin/node.js.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:90: update your workflow using https://app.stepsecurity.io/secureworkflow/SimenB/add-asset-html-webpack-plugin/node.js.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:93: update your workflow using https://app.stepsecurity.io/secureworkflow/SimenB/add-asset-html-webpack-plugin/node.js.yml/main?enable=pin
- Info: 0 out of 8 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
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
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 30 are checked with a SAST tool
Score
3.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