inject-html-webpack-plugin

1.0.1 verified Sat Apr 25 auth: no javascript

A webpack plugin that injects script tags and CSS links into HTML files using placeholder comments. Version 1.0.1 is the latest stable release. It provides an alternative to html-webpack-plugin with customizable injection markers, support for chunk-based asset injection, custom content injection, and transducer functions for CDN URL rewriting. Notable differentiators include simpler configuration via HTML comments and lower overhead.

Common errors

error Module not found: Error: Can't resolve 'inject-html-webpack-plugin' ↓

cause Package not installed or missing from node_modules.

fix

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

error TypeError: InjectHtmlPlugin is not a constructor ↓

cause Using ES module import without default export adaption.

fix

Use require() instead: const InjectHtmlPlugin = require('inject-html-webpack-plugin');

error Error: Could not find file: ./index.html for injection ↓

cause The 'filename' option points to a non-existent file relative to webpack context.

fix

Ensure the HTML file exists at the specified path, or update 'filename' accordingly.

error ValidationError: Invalid options object. InjectHtmlPlugin has been initialized using an options object that does not match the API schema. ↓

cause Options passed to constructor have typos or invalid keys.

fix

Check options object for misspellings (e.g., 'filname' instead of 'filename') and ensure only valid keys: filename, chunks, transducer, etc.

Warnings

gotcha Plugin does not generate HTML file; it only injects into existing files. ↓

fix Ensure the HTML file specified by 'filename' exists in the output path before running webpack.

gotcha Chunk names in 'chunks' array must match entry keys exactly; case-sensitive. ↓

fix Use same string as in entry configuration, e.g., entry: { index: './src/index.js' } → chunks: ['index'].

gotcha Transducer can be a string prepended to asset paths or a function; using a string without trailing slash may break paths. ↓

fix Ensure transducer string ends with '/' if used as URL base, or provide a function that handles path concatenation.

gotcha Custom injection content is inserted as-is; no escaping or template processing. ↓

fix Manually escape HTML special characters if needed.

deprecated Plugin may be deprecaed in favor of html-webpack-plugin which is more actively maintained. ↓

fix Consider migrating to html-webpack-plugin for better support and features.

Install

npm install inject-html-webpack-plugin

yarn add inject-html-webpack-plugin

pnpm add inject-html-webpack-plugin

Imports

InjectHtmlPlugin

wrong

import InjectHtmlPlugin from 'inject-html-webpack-plugin';

correct

const InjectHtmlPlugin = require('inject-html-webpack-plugin');

CJS only; ESM imports may fail due to lack of default export.

InjectHtmlPlugin

wrong

import * as InjectHtmlPlugin from 'inject-html-webpack-plugin';

correct

import InjectHtmlPlugin = require('inject-html-webpack-plugin'); (in TypeScript with esModuleInterop)

Use CJS require or import with esModuleInterop for TypeScript.

new InjectHtmlPlugin(options)

wrong

new InjectHtmlPlugin({ filename: 'index.html' }) with no './' (relative path issue)

correct

new InjectHtmlPlugin({ filename: './index.html' })

filename is relative to webpack context, default './index.html' works if file exists.

Quickstart

Configures InjectHtmlPlugin to inject script and CSS links into an HTML file with CDN transducer and custom timestamp injection.

// webpack.config.js
const InjectHtmlPlugin = require('inject-html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: './dist',
    filename: 'bundle.js'
  },
  plugins: [
    new InjectHtmlPlugin({
      filename: './src/index.html',
      chunks: ['main'],
      transducer: 'https://cdn.example.com/',
      custom: [{
        start: '<!-- start:time -->',
        end: '<!-- end:time -->',
        content: Date.now()
      }]
    })
  ]
};