html-webpack-partials-plugin

0.8.0 verified Sat Apr 25 auth: no javascript

Extends HTML Webpack Plugin (v4+) to inject HTML partials (e.g., headers, footers, analytics snippets) into webpack-generated HTML files. Version 0.8.0 is the latest stable release. Unlike manual template manipulation, it allows declarative partial injection via plugin options with fine-grained control over injection location (<head>/<body>), priority (prepend/append/replace), and per-template targeting. Supports multiple partials with independent settings.

Common errors

error Error: Cannot find module 'html-webpack-partials-plugin' ↓

cause Package not installed or missing from node_modules.

fix

Run 'npm install html-webpack-partials-plugin --save-dev' or 'yarn add html-webpack-partials-plugin -D'.

error TypeError: HtmlWebpackPartialsPlugin is not a constructor ↓

cause Possibly importing a named export incorrectly; the plugin is exported as default.

fix

Use 'const HtmlWebpackPartialsPlugin = require("html-webpack-partials-plugin");' (CommonJS) or ensure webpack config is not bundled.

error ValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. ↓

cause Plugin instantiation with wrong argument type (e.g., string instead of object).

fix

Ensure 'new HtmlWebpackPartialsPlugin({ path: '...' })' is used with an object.

Warnings

breaking Requires html-webpack-plugin >=4.3.0; incompatible with older versions (1.x-3.x). ↓

fix Upgrade html-webpack-plugin to 4.3.0 or higher.

gotcha template_filename option does not support regex; only exact string or '*' for all templates. '*.html' will not match. ↓

fix Use exact template filename (e.g., 'index.html') or pass an array of strings.

gotcha Partial files must be plain HTML snippets; no template engine (e.g., EJS) processing is applied. ↓

fix Ensure partial files contain only raw HTML; use HtmlWebpackPlugin's template for dynamic content.

deprecated Plugin is no longer actively maintained; last update 2021. Consider alternatives like html-webpack-plugin's own template feature or separate plugin. ↓

fix Evaluate migrating to html-webpack-plugin's template option or a more modern replacement.

Install

npm install html-webpack-partials-plugin

yarn add html-webpack-partials-plugin

pnpm add html-webpack-partials-plugin

Imports

HtmlWebpackPartialsPlugin

wrong

import HtmlWebpackPartialsPlugin from 'html-webpack-partials-plugin';

correct

const HtmlWebpackPartialsPlugin = require('html-webpack-partials-plugin');

CommonJS only; no default ESM export available. Use require().

HtmlWebpackPartialsPlugin

wrong

const { HtmlWebpackPartialsPlugin } = require('html-webpack-partials-plugin');

correct

const HtmlWebpackPartialsPlugin = require('html-webpack-partials-plugin');

Exported as a single constructor function, not a named export.

HtmlWebpackPartialsPlugin
wrong
```
new HtmlWebpackPartialsPlugin('./partials/header.html');
```
correct
```
new HtmlWebpackPartialsPlugin({ path: './partials/header.html' });
```
Must be instantiated with an object (or array of objects); passing a string directly will fail.

Quickstart

Shows a minimal webpack config with partial plugin injecting a analytics snippet into <head> using an environment variable.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPartialsPlugin = require('html-webpack-partials-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackPartialsPlugin({
      path: path.join(__dirname, 'partials', 'ga.html'),
      location: 'head',
      priority: 'high',
      options: { trackingId: process.env.GA_TRACKING_ID ?? '' }
    })
  ]
};