html-add-asset-webpack-plugin

Webpack plugin to inject tags to html.

Installation

npm install html-add-asset-webpack-plugin --save-dev

Usage

Add the plugin to your webpack config

import { HtmlAddAssetWebpackPlugin } from 'html-add-asset-webpack-plugin';
// or
const { HtmlAddAssetWebpackPlugin } = require('html-add-asset-webpack-plugin');

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html'
  }),
  new HtmlWebpackPlugin({
    filename: 'other.html',
    tags: [
      'simple.js',
      {
        tagName: 'script',
        prepend: true,
        attributes: {
          src: 'special-script.js'
        }
      }
    ]
  }),
  new HtmlAddAssetWebpackPlugin()
];

To:

<!-- index.html -->
<script src="common-script.js"></script>

<!-- other.html -->
<script src="simple.js"></script>
<script src="special-script.js"></script>
<script src="common-script.js"></script>

Options

HtmlWebpackPlugin.Options.tags:

interface Tag extends Omit<HtmlTagObject, 'voidTag'> {
  voidTag?: boolean;
  prepend?: boolean;
  tagName: 'meta' | 'script' | 'style' | 'link';
}

type tags = (string | Tag)[];

Inspiration

This project is inspired by html-webpack-inject-plugin.