pug-html-loader

1.1.7 verified Sat Apr 25 auth: no javascript maintenance

Webpack loader that compiles Pug (formerly Jade) templates into HTML strings. Version 1.1.7 is the latest stable release. It connects Pug's compile function to Webpack's module system, outputting raw HTML that can be further processed by loaders like html-loader or raw-loader. Commonly used in webpack configurations to convert .pug files into plain HTML for bundling. Limited maintenance and lacks TypeScript support.

Common errors

error Module parse failed: Unexpected token (1:0) ↓

cause Webpack tries to parse the .pug file as JavaScript without appropriate loader.

fix

Ensure .pug files are processed by pug-html-loader in webpack config.

error Cannot find module 'pug-html-loader' ↓

cause Loader not installed in project dependencies.

fix

Run npm install pug-html-loader --save-dev.

Warnings

breaking Webpack 4+ requires `use` array instead of `loader` property. ↓

fix Change `loaders: [...]` to `use: [...]` in webpack config.

deprecated Package may not be actively maintained; consider alternatives like `pug-loader`. ↓

fix Migrate to `pug-loader` (https://github.com/pugjs/pug-loader) for better support.

gotcha Loader returns a JavaScript string; nesting with other loaders requires careful chaining. ↓

fix Use `raw-loader` first to ensure the output is treated as a string, not JavaScript.

Install

npm install pug-html-loader

yarn add pug-html-loader

pnpm add pug-html-loader

Imports

default
wrong
```
const pugHtmlLoader = require('pug-html-loader')
```
correct
```
import html from 'pug-html-loader'
```
Loader is typically used in webpack config, not imported directly in source code.
pug-html-loader (as loader string)
wrong
```
{
  test: /\.pug$/,
  use: 'pug-html-loader'
}
```
correct
```
{
  test: /\.pug$/,
  use: ['raw-loader', 'pug-html-loader']
}
```
Loader is meant to be used in a chain; raw-loader or html-loader is often required to handle the output.

Quickstart

Webpack configuration using pug-html-loader to compile .pug files to HTML strings.

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          'raw-loader',
          'pug-html-loader'
        ],
        options: {
          data: {} // optional data to pass to pug render
        }
      }
    ]
  },
  output: {
    filename: 'bundle.js'
  }
};