html-webpack-pug-plugin

4.0.0 verified Sat Apr 25 auth: no javascript

A webpack plugin that extends html-webpack-plugin to output Pug/Jade files instead of HTML. Version 4.0.0 supports webpack 3/4/5 and html-webpack-plugin 4/5. It processes the HTML generated by html-webpack-plugin and converts it to Pug, including script and link tags for webpack bundles. Key differentiators: it focuses solely on Pug output, not Slim or Haml (dropped in v0.1.0), and offers an optional AST mode (though discouraged due to vulnerable dependencies). Release cadence: stable, with infrequent updates.

Common errors

error Error: Plugin could not be instantiated: HtmlWebpackPugPlugin is not a constructor ↓

cause Using destructured require on a default-exported module (e.g., const { HtmlWebpackPugPlugin } = require('...'))

fix

Use const HtmlWebpackPugPlugin = require('html-webpack-pug-plugin');

error TypeError: Cannot read property 'options' of undefined ↓

cause HtmlWebpackPugPlugin called before HtmlWebpackPlugin, or missing HtmlWebpackPlugin entirely

fix

Ensure HtmlWebpackPlugin is added first in plugins array and is instantiated.

error Error: HtmlWebpackPugPlugin: adjustIndent is not a function ↓

cause Passing adjustIndent option incorrectly (e.g., as a function instead of boolean)

fix

Set adjustIndent: true or false, not a function.

error ModuleNotFoundError: Module not found: Error: Can't resolve 'pug' ↓

cause Missing pug dependency if template uses pug but not installed

fix

Install pug: npm install --save-dev pug

Warnings

gotcha Do not use the plugin with Slim or Haml templates; support dropped in v0.1.0. ↓

fix Use html-webpack-slim-plugin or html-webpack-haml-plugin instead.

deprecated AST mode (option { ast: true }) uses outdated, vulnerable packages like pug-source-gen. ↓

fix Avoid setting ast: true; use default mode. If needed, pin vulnerable packages manually.

gotcha HtmlWebpackPugPlugin must be added exactly once, even with multiple HtmlWebpackPlugin instances. ↓

fix Instantiate HtmlWebpackPugPlugin only once in the plugins array.

gotcha Minify must be set to false on HtmlWebpackPlugin to preserve valid Pug output. ↓

fix Add minify: false to HtmlWebpackPlugin options.

breaking Renamed from 'html-webpack-jade-plugin' in early versions; all exports changed. ↓

fix Use HtmlWebpackPugPlugin (not HtmlWebpackJadePlugin).

Install

npm install html-webpack-pug-plugin

yarn add html-webpack-pug-plugin

pnpm add html-webpack-pug-plugin

Imports

HtmlWebpackPugPlugin

wrong

const { HtmlWebpackPugPlugin } = require('html-webpack-pug-plugin');

correct

import HtmlWebpackPugPlugin from 'html-webpack-pug-plugin';

Default export, not named. Use import default or require with default property.

HtmlWebpackPugPlugin (CommonJS)

wrong

const { HtmlWebpackPugPlugin } = require('html-webpack-pug-plugin');

correct

const HtmlWebpackPugPlugin = require('html-webpack-pug-plugin');

CommonJS require returns the constructor directly, not an object.

HtmlWebpackPlugin
wrong
```
import HtmlWebpackPugPlugin from 'html-webpack-plugin';
```
correct
```
import HtmlWebpackPlugin from 'html-webpack-plugin';
```
GitHub README example uses ES modules; 'html-webpack-pug-plugin' must be added separately.

Quickstart

Basic webpack config using html-webpack-pug-plugin with a Pug template, generating a Pug output file.

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPugPlugin = require('html-webpack-pug-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/template.pug',
      filename: 'index.pug',
      minify: false
    }),
    new HtmlWebpackPugPlugin({
      adjustIndent: false
    })
  ]
};