inject-body-webpack-plugin

1.3.0 verified Sat Apr 25 auth: no javascript

A Webpack plugin (v1.3.0, latest) that injects a custom HTML string into the <body> of html-webpack-plugin output. Released under MIT, updated irregularly. Unlike generic string-replacement plugins, it integrates directly with html-webpack-plugin's compilation hooks, supporting position (start/end) and custom content. Requires html-webpack-plugin ^5.3.1 as a peer dependency. Ships TypeScript types for full IDE support.

Common errors

error TypeError: InjectBodyPlugin is not a constructor ↓

cause Using named import instead of default import in ESM.

fix

Use import InjectBodyPlugin from 'inject-body-webpack-plugin' (no braces).

error Cannot find module 'html-webpack-plugin' ↓

cause Missing peer dependency html-webpack-plugin.

fix

Run npm install --save-dev html-webpack-plugin.

error Error: Hook 'html-webpack-plugin-before-html-processing' is not supported ↓

cause Using incompatible html-webpack-plugin version (< 4).

fix

Upgrade html-webpack-plugin to version 4 or higher.

Warnings

breaking Version 1.2.0 removed the 'port' option. ↓

fix Remove 'port' from options; it is no longer supported.

breaking Version 1.1.0 migrated to html-webpack-plugin 4; incompatible with v3. ↓

fix Ensure html-webpack-plugin version 4+ is installed.

breaking Version 1.0.0 initial release; default content differs from later versions. ↓

fix Default content changed in 1.3.0; specify 'content' explicitly for consistent behavior.

gotcha Plugin must be placed after HtmlWebpackPlugin in the plugins array to function correctly. ↓

fix Order plugins so that HtmlWebpackPlugin appears first.

gotcha The injected content is raw HTML; no escaping. XSS risk if user input is used. ↓

fix Sanitize any user-provided content before passing to the plugin.

Install

npm install inject-body-webpack-plugin

yarn add inject-body-webpack-plugin

pnpm add inject-body-webpack-plugin

Imports

InjectBodyPlugin

wrong

import { InjectBodyPlugin } from 'inject-body-webpack-plugin'

correct

import InjectBodyPlugin from 'inject-body-webpack-plugin'

Default export only; named import will fail.

InjectBodyPlugin

wrong

const InjectBodyPlugin = require('inject-body-webpack-plugin')

correct

const InjectBodyPlugin = require('inject-body-webpack-plugin').default

CJS requires .default because module.exports is an ES module default export.

InjectBodyPlugin

wrong

import { InjectBodyPluginOptions } from 'inject-body-webpack-plugin'

correct

import type { InjectBodyPluginOptions } from 'inject-body-webpack-plugin'

Options type is a named export; main class is default export.

Quickstart

Shows basic usage: import the plugin, instantiate with content string, and add to Webpack plugins array alongside HtmlWebpackPlugin.

// webpack.config.js
import HtmlWebpackPlugin from 'html-webpack-plugin';
import InjectBodyPlugin from 'inject-body-webpack-plugin';

export default {
  plugins: [
    new HtmlWebpackPlugin({
      templateContent: '<html><body></body></html>',
    }),
    new InjectBodyPlugin({
      content: '<div id="root">App</div>',
      position: 'start',
    }),
  ],
};