Add a JavaScript or CSS asset to the HTML generated by html-webpack-plugin

Install the plugin with npm:

NOTE: This plugin requires html-webpack-plugin@^3, html-webpack-plugin@^4, or html-webpack-plugin@^5.

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:

This will add a script tag to the HTML generated by html-webpack-plugin, and look like:

NOTE: You can also pass an array of assets to be added. Same API as mentioned below, just pass multiple objects as an array.

Options are passed to the plugin during instantiation.

Type: string, mandatory unless glob is defined

The absolute path of the file you want to add to the compilation, and resulting HTML file.

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.

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.

Type: boolean, default: false

If true, will append a unique hash of the file to the filename. This is useful for cache busting.

Type: boolean, default: true

If true, will add filepath + '.*' to the compilation as well. E.g filepath.map and filepath.gz.

Type: string

If set, will be used as the output directory of the file.

Type: string

If set, will be used as the public path of the script or link tag.

Type: string, default: js

Can be set to css to create a link-tag instead of a script-tag.

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.

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.

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.

Your main build:

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.