npmpackage.info

Gathering detailed insights and metrics for html-webpack-include-assets-plugin

Other packages similar to html-webpack-include-assets-plugin

html-webpack-tags-plugin

3.0.2

lets you define html tags to inject with html-webpack-plugin

webpack-cdn-plugin

3.3.1

A webpack plugin that use externals of CDN urls for production and local node_modules for development

rrd-html-webpack-include-assets-plugin

1.0.6

Add the ability to include assets based on a list of paths

html-webpack-include-assets-plugin-temp

0.0.5

Add the ability to include assets based on a list of paths

Gathering detailed insights and metrics for html-webpack-include-assets-plugin

html-webpack-include-assets-plugin - 2.0.0 | npmpackage.info

html-webpack-include-assets-plugin

lets you define html tags to inject with html-webpack-plugin

2.0.0

257

MIT

JavaScript

12.29 kB

6,676,752 1.7

Installations

npm install html-webpack-include-assets-plugin

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Score

88.8

Supply Chain

99.5

Quality

74.4

Maintenance

100

Vulnerability

98.6

License

Pull Requests

Open

7

Total

38

Closed

17

Merged

14

Issues

Open

8

Total

50

Closed

42

Releases

3.0.2

v3.0.2

Updated on Oct 30, 2021

3.0.1

v3.0.1

Updated on Apr 07, 2021

3.0.0

v3.0.0

Updated on Feb 03, 2021

2.0.17

Updated on Sep 23, 2019

2.0.16

Updated on Sep 23, 2019

2.0.15

Updated on Aug 21, 2019

View All 21 releases

Languages

JavaScript

JavaScript (100%)

Developer

jharris4

Download Statistics

Total Downloads

6,676,752

Last Day

1,641

Last Week

10,423

Last Month

40,251

Last Year

353,094

GitHub Statistics

MIT License

257 Stars

296 Commits

31 Forks

2 Watchers

10 Branches

11 Contributors

Updated on May 13, 2025

Bundle Size

38.31 kB

Minified

12.29 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 11 Contributors

Package Meta Information

Latest Version

2.0.0

Package Id

html-webpack-include-assets-plugin@2.0.0

Size

9.45 kB

Published on

Apr 19, 2019

Total Downloads

Cumulative downloads

Total Downloads

6,676,752

Last Day

-14.2%

1,641

Compared to previous day

Last Week

17.3%

10,423

Compared to previous week

Last Month

48.4%

40,251

Compared to previous month

Last Year

-38.9%

353,094

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

glob minimatch slash

Dev Dependencies

cheerio copy-webpack-plugin css-loader html-webpack-plugin jasmine jasmine-expect mini-css-extract-plugin rimraf semistandard style-loader webpack

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: string or array

Specifies the file extensions to use to determine if assets are script assets. Default is ['.js'].
cssExtensions: string or array

Specifies the file extensions to use to determine if assets are style assets. Default is ['.css'].
assets: string or array or object

Assets 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 jsExtensions or cssExtensions values, 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) and type or glob or globPath or attributes (optional). In this case path is the asset href/src, type is one of js or css, and glob is a wildcard to use to match all files in the path (uses the glob package). The globPath can be used to specify the directory from which the glob should search for filename matches (the default is to use path within webpack's output directory).

The attributes property 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 assetPath property 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 using webpack-dev-server or webpack-dev-middleware in development mode.
append: boolean

Specifying whether the assets should be prepended (false) before any existing assets, or appended (true) after them.
resolvePaths: boolean

Specifying whether the asset paths should be resolved with path.resolve (i.e. made absolute).
publicPath: boolean or string

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 like myPublicPath/ may be used to prefix all assets with the given string. Default is true.
hash: boolean or function(assetName, hash)

Specifying whether the assets should be appended with webpack's compilation hash. This is useful for cache busting. Default is false.
files: string or array

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 (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 HtmlWebpackPlugin plugins before any HtmlWebpackIncludeAssetsPlugin plugins 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.inject to be true (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.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.7

/10

Last Scanned on 2025-05-05

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