Registry / devops / inject-html-webpack-plugin

inject-html-webpack-plugin

library1.0.1jsnpmunverified

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.

devops web-framework

npm install inject-html-webpack-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · INJECT-HTML-WEBPAC

inject-html-webpack-plugin

devopsjavascriptv1.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

InjectHtmlPlugin

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

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

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

InjectHtmlPlugin

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

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

Use CJS require or import with esModuleInterop for TypeScript.

new InjectHtmlPlugin(options)

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

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

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

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: '', end: '', content: Date.now() }] }) ] };

Debug

Known issues

gotchaPlugin 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.

affects: >=1.0.0

gotchaChunk 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'].

affects: >=1.0.0

gotchaTransducer 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.

affects: >=1.0.0

gotchaCustom injection content is inserted as-is; no escaping or template processing.

fix

Manually escape HTML special characters if needed.

affects: >=1.0.0

deprecatedPlugin 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.

affects: >=1.0.0

Errors

Common errors & fixes

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

Package not installed or missing from node_modules.

fix

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

TypeError: InjectHtmlPlugin is not a constructor

Using ES module import without default export adaption.

fix

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

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

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.

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

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.

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/ali322/inject-html-webpack-plugin ↗

packagehttps://www.npmjs.com/package/inject-html-webpack-plugin ↗