html-webpack-inject-plugin

inject external source to html

Usage no npm install needed!

<script type="module">
  import htmlWebpackInjectPlugin from 'https://cdn.skypack.dev/html-webpack-inject-plugin';
</script>

README

html-webpack-inject-plugin

node npm license Build Status Standard - JavaScript Style Guide

inject external tag to html

Installation

npm install --save-dev html-webpack-inject-plugin

Usage

Require the plugin in your webpack config

import HtmlWebpackInjectPlugin from 'html-webpack-inject-plugin'
// or
const HtmlWebpackInjectPlugin = require('html-webpack-inject-plugin').default

Add the plugin to your webpack config as follows

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html'
  }),
  new HtmlWebpackPlugin({
    filename: 'other.html'
  }),
  new HtmlWebpackInjectPlugin({
    externals: [
      {
        tagName: 'script',
        attributes: {
          src: 'common-script.js',
          type: 'text/javascript'
        }
      },
      {
        tagName: 'script',
        attributes: {
          src: 'only-inject-to-other-script.js',
          type: 'text/javascript'
        },
        include: ['other.html']
      }
    ],
    prepend: true // default is false
  })
]

Options

  • externals: <HtmlAssetItem>[]: external HTMLTagObject which you want to add
  • prepend: insert before parent first child