• Stars
    star
    425
  • Rank 102,094 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 12 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Pug loader module for Webpack

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

More Repositories

1

pug

Pug โ€“ robust, elegant, feature rich template engine for Node.js
JavaScript
21,628
star
2

babel-plugin-transform-react-pug

A plugin for transpiling pug templates to jsx
JavaScript
807
star
3

react-jade

DEPRECATED, see
JavaScript
552
star
4

pug-cli

Pug's CLI interface
JavaScript
259
star
5

pug-lint

An unopinionated and configurable linter and style checker for Pug
JavaScript
228
star
6

babel-walk

Lightweight Babylon AST traversal tools.
TypeScript
44
star
7

then-pug

**EXPERIMENTAL** Async promise based Jade
JavaScript
42
star
8

pug-lexer

The pug lexer (converts a string into an array of tokens)
JavaScript
42
star
9

pug-zh-cn

The Simplified Chinese documentation for Pug.
32
star
10

with

Compile time `with` for strict mode JavaScript
TypeScript
28
star
11

pug-parser

JavaScript
26
star
12

void-elements

Object of "void elements" as defined by the WHATWG HTML Standard.
JavaScript
25
star
13

js-stringify

Stringify an object so it can be safely inlined in JavaScript code
JavaScript
19
star
14

constantinople

Determine whether a JavaScript expression evaluates to a constant (using Acorn)
TypeScript
19
star
15

pug-www

The website for Pug.
CSS
15
star
16

pug-en

The English documentation for Pug.
13
star
17

token-stream

Take an array of token and produce a more useful API to give to a parser
JavaScript
11
star
18

pug-logo

Pug logo and branding materials
10
star
19

pug-walk

10
star
20

doctypes

Shorthands for commonly used doctypes
JavaScript
10
star
21

pug-runtime

The runtime for the Pug compiler
JavaScript
10
star
22

pug-ast-spec

Specification of the Pug AST
10
star
23

is-expression

Validates a string as a JavaScript expression
JavaScript
9
star
24

pug-code-gen

7
star
25

babel-plugin-transform-with

Babel plugin to convert "with" statements into strict mode-compatible JavaScript.
JavaScript
7
star
26

pug-source-gen

Generate Pug source from a Pug AST.
JavaScript
6
star
27

pug-filters

6
star
28

pug-load

The Pug loader is responsible for loading the dependencies of a given Pug file.
JavaScript
5
star
29

pug-plugin-dynamic-include

WIP, UNPUBLISHED. Pug plugin adding support for dynamic inclusion.
JavaScript
4
star
30

pug-attrs

3
star
31

pug-linker

2
star
32

pug-plugin-debug-line

WIP, UNPUBLISHED. Add location information to all tags.
JavaScript
2
star
33

brjade

Inline jade templates when browserifying
JavaScript
2
star
34

pug-fr

French documentation for Pug
1
star
35

pug-lint-config-migration-v2

pug-lint configuration to help migrate projects to Pug 2.0.0.
JavaScript
1
star
36

pug-error

Standard error objects for pug
JavaScript
1
star
37

pug-strip-comments

1
star