Skip to content
Add a JavaScript or CSS asset to the HTML generated by html-webpack-plugin
Branch: master
Clone or download
Latest commit 63e7fe8 Jan 27, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
__snapshots__ feat: add "includeRelated" option to also copy all related files (#63) Sep 15, 2018
example feat: add `attributes` option Oct 13, 2018
fixture feat: add "includeRelated" option to also copy all related files (#63) Sep 15, 2018
src fix: upgrade dependencies Jan 27, 2019
.babelrc
.editorconfig Use prettier on md and json Nov 11, 2017
.eslintignore feat: add `attributes` option Oct 13, 2018
.eslintrc chore: upgrade to jest 23 and babel 7 Sep 15, 2018
.gitattributes Initial commit Feb 27, 2016
.gitignore Use jest for tests (#46) Dec 3, 2016
.hound.yml Initial commit Feb 27, 2016
.travis.yml chore: remove unused semantic-release after_success script [skip ci] Sep 15, 2018
CHANGELOG.md feat: add "includeRelated" option to also copy all related files (#63) Sep 15, 2018
LICENSE fix: webpack 4 compatibility Mar 3, 2018
README.md feat: add `attributes` option Oct 13, 2018
appveyor.yml chore: upgrade to jest 23 and babel 7 Sep 15, 2018
index.d.ts fix: update TS definition Oct 13, 2018
package.json chore: upgrade lint config Jan 27, 2019
test.js fix: upgrade dependencies Jan 27, 2019
yarn.lock

README.md

add-asset-html-webpack-plugin

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

NPM Version Linux & Mac Build Status Windows Build Status Code Coverage branch

Dependency Status Dev Dependency Status Peer Dependency Status Greenkeeper Dependency Status

Installation

Install the plugin with npm:

$ npm i add-asset-html-webpack-plugin -D

NOTE: This plugin requires html-webpack-plugin@^2.10.0.

Migrating to webpack 4+

After webpack 4+, it is required to apply AddAssetHtmlPlugin after HtmlWebpackPlugin to register html-webpack-plugin-before-html-generation hook which is used inside first, while previous versions of webpack do not care about it.

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 the 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
  { filepath: require.resolve('./**/*.dll.js') },
]);

Options

Options are passed to the plugin during instantiation.

new AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') });

filepath

Type: string|Glob, mandatory

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

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,
      },
    }),
  ],
};
You can’t perform that action at this time.