{"id":20482,"library":"pug-loader","title":"pug-loader","description":"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.","status":"active","version":"2.4.0","language":"javascript","source_language":"en","source_url":"git://github.com/pugjs/pug-loader","tags":["javascript"],"install":[{"cmd":"npm install pug-loader","lang":"bash","label":"npm"},{"cmd":"yarn add pug-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add pug-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; runtime engine for compiling Pug templates","package":"pug","optional":false}],"imports":[{"note":"Since webpack 2, use 'rules' not 'loaders' in module configuration.","wrong":"module.exports = { ... config: { module: { loaders: [ { test: /\\.pug$/, loader: 'pug-loader' } ] } } }","symbol":"pug-loader","correct":"module.exports = { ... config: { module: { rules: [ { test: /\\.pug$/, loader: 'pug-loader' } ] } } }"},{"note":"Inline loader syntax ensures pug-loader is used even if not bound to .pug extension.","wrong":"var template = require('./file.pug'); (without binding loader)","symbol":"template function","correct":"var template = require('pug-loader!./file.pug');"},{"note":"Use apply-loader to get rendered HTML at compile time instead of template function.","wrong":"var html = require('!pug-loader!./file.pug'); (missing apply-loader)","symbol":"apply-loader","correct":"var html = require('apply-loader!pug-loader!./file.pug');"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    filename: 'bundle.js',\n    path: __dirname + '/dist'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.pug$/,\n        loader: 'pug-loader',\n        options: {\n          doctype: 'html',\n          pretty: true\n        }\n      }\n    ]\n  }\n};\n\n// src/index.js\nvar template = require('./template.pug');\nvar html = template({ name: 'World' });\nconsole.log(html);","lang":"javascript","description":"Shows webpack configuration for pug-loader and usage in JavaScript to compile a Pug template with locals."},"warnings":[{"fix":"Replace module.loaders array with module.rules in your webpack config.","message":"webpack 2+ changed from module.loaders to module.rules. Using module.loaders will not work.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Bind pug-loader to .pug files via module.rules and use plain require('./file.pug').","message":"Inline loader syntax (e.g., require('pug-loader!./file.pug')) is discouraged in webpack 2+.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Avoid using such plugins or implement custom resolution via webpack aliases.","message":"Pug plugins implementing 'read' or 'resolve' hooks are not supported due to webpack's file resolution.","severity":"gotcha","affected_versions":"all"},{"fix":"Ensure module.rules includes test: /\\.pug$/ for pug-loader.","message":"If your .pug files include other .pug files, you must bind pug-loader to .pug extension, else includes will fail.","severity":"gotcha","affected_versions":"all"},{"fix":"Rename .jade files to .pug and update references.","message":"Legacy .jade extension support may be removed in future versions.","severity":"deprecated","affected_versions":">=2.4.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add a rule in webpack.config.js: { test: /\\.pug$/, loader: 'pug-loader' }","cause":"Missing or misconfigured loader binding for .pug extension.","error":"Module not found: Error: Cannot resolve 'file' or 'directory' ./file.pug"},{"fix":"Install pug v2: npm install pug@2","cause":"Incorrect version of pug (v1.x) installed. pug-loader requires pug ^2.0.0.","error":"TypeError: pug.compile is not a function"},{"fix":"Remove the plugin or use webpack aliases/resolve for file resolution.","cause":"Using a Pug plugin that implements file reading/resolution which conflicts with webpack.","error":"Error: options.plugins contains a plugin that implements 'read' or 'resolve'. These hooks are reserved for the loader."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}