1. pug-loader
Pug loader module for webpack
pug-loader
Package: pug-loader
Created by: pugjs
Last modified: Sat, 25 Jun 2022 00:05:41 GMT
Version: 2.4.0
License: MIT
Downloads: 180,267
Repository: https://github.com/pugjs/pug-loader

Install

npm install pug-loader
yarn add pug-loader

pug-loader

Pug loader for webpack.

Usage

 var template = require("pug-loader!./file.pug");
// => returns file.pug content as template function

// or, if you've bound .pug to pug-loader
var template = require("./file.pug");

var locals = { /* ... */ };

var html = template(locals);
// => the rendered HTML

For more information on how to use webpack loaders, check the official documentation.

In order to obtain the rendered HTML at compile time, combine this loader with apply-loader:

var html = require("apply-loader!pug-loader!./file.pug");
// => the HTML is rendered at compile time

Legacy .jade files

pug-loader fully supports .jade files. Just use pug-loader with .jade files as you would with a .pug file.

Includes

If you are using includes, you must make sure that .pug (and if needed for legacy files, .jade) is bound to pug-loader. Check the webpack documentation on how to do that for CLI and for configuration files.

Options

The following options are available to be set for the loader. They are all mapped directly to Pug options, unless pointed out otherwise.

  • doctype
    • Unlike Pug, it defaults to "html" if not set
  • globals
  • self
  • plugins
    • Note that you cannot specify any Pug plugins implementing read or resolve hooks, as those are reserved for the loader
  • pretty
  • filters
  • root
    • webpack uses its own file resolving mechanism, so while it is functionally equivalent to the Pug option with the same name, it is implemented differently

Embedded resources

Try to use require for all your embedded resources, to process them with webpack.

div
  img(src=require("./my/image.png"))

Remember, you need to configure loaders for these file types too. You might be interested in the file loader.

License

MIT

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code