Security News
MCP Community Begins Work on Official MCP Metaregistry
The MCP community is launching an official registry to standardize AI tool discovery and let agents dynamically find and install MCP servers.
By Sarah Gooding - May 09, 2025
🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
add-asset-html-webpack-plugin
Advanced tools
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:
$ 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:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const webpackConfig = {
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js',
},
plugins: [
new HtmlWebpackPlugin(),
new AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') }),
],
};
This will add a script tag to the HTML generated by html-webpack-plugin, and
look like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
<script src="some-file.js"></script>
</body>
</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.
new AddAssetHtmlPlugin([
{ filepath: require.resolve('./some-file') },
{ filepath: require.resolve('./some-other-file') },
// Glob to match all of the dll file, make sure to use forward slashes on Windows
{ glob: require.resolve('./**/*.dll.js') },
]);
Options
Options are passed to the plugin during instantiation.
new 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
const path = require('path');
const webpack = require('webpack');
const webpackConfig = {
entry: {
vendor: ['react', 'redux', 'react-router'],
},
devtool: '#source-map',
output: {
path: path.join(__dirname, 'build'),
filename: '[name].dll.js',
library: '[name]_[hash]',
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, 'build', '[name]-manifest.json'),
name: '[name]_[hash]',
}),
],
};
Your main build:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const webpackConfig = {
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js',
},
plugins: [
new webpack.DllReferencePlugin({
context: path.join(__dirname),
manifest: require('./build/vendor-manifest.json'),
}),
new HtmlWebpackPlugin(),
new AddAssetHtmlPlugin({
filepath: path.resolve(__dirname, './build/*.dll.js'),
}),
],
};
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
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const AddAssetHtmlPlugin = require('../../');
const webpackConfig = {
entry: 'entry.js',
devtool: '#source-map',
mode: 'development',
output: {
path: 'dist',
filename: 'index_bundle.js',
},
plugins: [
new HtmlWebpackPlugin(),
new AddAssetHtmlPlugin({
filepath: path.resolve(__dirname, './polyfill.js'),
attributes: {
nomodule: true,
},
}),
],
};
Keywords
FAQs
Add a JS or CSS assets to a generated HTML file
The npm package add-asset-html-webpack-plugin receives a total of 33,595 weekly downloads. As such, add-asset-html-webpack-plugin popularity was classified as popular.
We found that add-asset-html-webpack-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 09 May 2023
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Research
Security News
Malicious npm Packages Use Telegram to Exfiltrate BullX Credentials
Socket uncovers an npm Trojan stealing crypto wallets and BullX credentials via obfuscated code and Telegram exfiltration.
By Kush Pandya - May 08, 2025
Research
Security News
Backdooring the IDE: Malicious npm Packages Hijack Cursor Editor on macOS
Malicious npm packages posing as developer tools target macOS Cursor IDE users, stealing credentials and modifying files to gain persistent backdoor access.
By Kirill Boychenko - May 07, 2025