pug-loader

library2.4.0jsnpmunverified

Webpack loader for Pug (formerly Jade) templates, version 2.4.0. Compiles Pug templates to JavaScript template functions at build time. Works with webpack module bundler, supports embedded resources via require(), and can render HTML at compile time using apply-loader. Supports both .pug and legacy .jade files. Options map directly to Pug options. Requires pug ^2.0.0 as a peer dependency. A key differentiator is automatic resolution of includes and inheritance via webpack's module resolution.

web-framework devops

npm install pug-loader

github ↗package ↗

INSTALL

IMPORT

SIG · PUG-LOADER

pug-loader

web-frameworkjavascriptv2.4.0

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.

pug-loader

✓ module.exports = { ... config: { module: { rules: [ { test: /\.pug$/, loader: 'pug-loader' } ] } } }

✗ module.exports = { ... config: { module: { loaders: [ { test: /\.pug$/, loader: 'pug-loader' } ] } } }

Since webpack 2, use 'rules' not 'loaders' in module configuration.

template function

✓ var template = require('pug-loader!./file.pug');

✗ var template = require('./file.pug'); (without binding loader)

Inline loader syntax ensures pug-loader is used even if not bound to .pug extension.

apply-loader

✓ var html = require('apply-loader!pug-loader!./file.pug');

✗ var html = require('!pug-loader!./file.pug'); (missing apply-loader)

Use apply-loader to get rendered HTML at compile time instead of template function.

Shows webpack configuration for pug-loader and usage in JavaScript to compile a Pug template with locals.

// webpack.config.js module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: __dirname + '/dist' }, module: { rules: [ { test: /\.pug$/, loader: 'pug-loader', options: { doctype: 'html', pretty: true } } ] } }; // src/index.js var template = require('./template.pug'); var html = template({ name: 'World' }); console.log(html);

Debug

Known issues

breakingwebpack 2+ changed from module.loaders to module.rules. Using module.loaders will not work.

fix

Replace module.loaders array with module.rules in your webpack config.

affects: >=2.0.0

deprecatedInline loader syntax (e.g., require('pug-loader!./file.pug')) is discouraged in webpack 2+.

fix

Bind pug-loader to .pug files via module.rules and use plain require('./file.pug').

affects: >=2.0.0

gotchaPug plugins implementing 'read' or 'resolve' hooks are not supported due to webpack's file resolution.

fix

Avoid using such plugins or implement custom resolution via webpack aliases.

affects: all

gotchaIf your .pug files include other .pug files, you must bind pug-loader to .pug extension, else includes will fail.

fix

Ensure module.rules includes test: /\.pug$/ for pug-loader.

affects: all

deprecatedLegacy .jade extension support may be removed in future versions.

fix

Rename .jade files to .pug and update references.

affects: >=2.4.0

Errors

Common errors & fixes

Module not found: Error: Cannot resolve 'file' or 'directory' ./file.pug

Missing or misconfigured loader binding for .pug extension.

fix

Add a rule in webpack.config.js: { test: /\.pug$/, loader: 'pug-loader' }

TypeError: pug.compile is not a function

Incorrect version of pug (v1.x) installed. pug-loader requires pug ^2.0.0.

fix

Install pug v2: npm install pug@2

Error: options.plugins contains a plugin that implements 'read' or 'resolve'. These hooks are reserved for the loader.

Using a Pug plugin that implements file reading/resolution which conflicts with webpack.

fix

Remove the plugin or use webpack aliases/resolve for file resolution.

Upgrade

Version history

2.4.0latest on npm

Audit

Dependencies

pugrequiredPeer dependency; runtime engine for compiling Pug templates

Agent activity

10 hits · last 30 days

node

Resources

githubhttps://github.com/pugjs/pug-loader ↗

packagehttps://www.npmjs.com/package/pug-loader ↗