Stack Overflow
Stack Overflow

Questions tagged [pug-loader]

pug-loader is a webpack module used to compile Pug or Jade into HTML.

pug-loader is a webpack module used to compile Pug or Jade into HTML. This enables developers to use the simpler and less verbose Pug/Jade syntax to define their web pages, but still have the benefits of webpack dynamic packaging.

91 questions
9
votes
0 answers

Insert hashed bundle URLs into static pug templates

I'm using Webpack pug-html-loader + file-loader to generate a bunch of static pug templates. I also want to start added hashed bundle filenames, but I cant work out how to insert the hashed filenames into all my pug templates This is how I'm…
Matthew
  • 952
  • 7
  • 20
9
votes
1 answer

Webpack - dont output a bundle for a certain entry point

Im using a file-loader to automatically render a bunch of pug templates to static html files, but webpack is also outputting a pointless file based on the entry point Eg this is in my webpack.config.js: entry: { 'js/build/bundle.js':…
Matthew
  • 952
  • 7
  • 20
9
votes
1 answer

How to set up webpack for Pug, React, and ES6

I’m trying to make a website using React and ES6. I’m using Webpack to transpile my JS using Babel and it works fine. Now I need to know how to write my template in Pug (or HTML for that matter) and add it to the Webpack workflow. I want my build…
Hum4n01d
  • 1,312
  • 3
  • 15
  • 30
7
votes
1 answer

Pug + webpack-dev-server

I'm using webpack v4 and I'm trying to use Pug with webpack-dev-server but when I run webpack-dev-server --mode development it doesn't serve compiled Pug. Please, help. I don't know what to do. Thanks for reply. Here is my config: const path =…
zh-mskl9
  • 75
  • 6
6
votes
1 answer

Webpack Pug/HTML loaders converts capital letters to lowercase on production mode

I am using both vue single-file components and separating of markup and logic to .pug and .ts files respectively. If you interesting why I don't unify is please see the comments section. Problem import template from…
Takeshi Tokugawa YD
  • 670
  • 5
  • 40
  • 124
6
votes
2 answers

Pass asynchronously loaded data to pug-html-loader in webpack

General setup I am building a small website with webpack and pug based on this awesome boilerplate: https://github.com/alexnoz/webpack-pug-scss-boilerplate.git The project is up and running and I am able to render pug files…
Robert
  • 1,579
  • 1
  • 21
  • 36
6
votes
5 answers

Pass variables from html-webpack-plugin to pug template

Is it possible to pass a variable to the .pug template loaded by the 'pug-html-loader' which I defined in the 'html-webpack-plugin' before? webpack.config.babel.js ... { test: /\.pug$/, use: [ { loader: 'html-loader' …
Sascha
  • 117
  • 2
  • 6
6
votes
2 answers

How to output html files from pug templates with webpack?

I'm trying to output individual html files from pug templates in my webpack project. The problem I'm having is in getting pug-loader to render html into the files. My webpack.config: const path = require('path'); const glob = require('glob'); const…
Mark Thë Brouch
  • 179
  • 3
  • 12
5
votes
1 answer

How to change all href and src paths on webpack building?

I have a websites, written mostly in pug (html preprocessor). I use output.publicPath equal to '/' so I can run webpack in development mode and work easily, treating project folder as a root one, but every href, src and url is an absolute path. I…
SpekalsG3
  • 155
  • 1
  • 8
5
votes
2 answers

Webpack to simply compile a bunch of Pug templates to HTML

Im getting started with webpack but one thing I cannot for the life of me work out is how to take a folder (with possible nested folders), full of .pug templates, and simply compile them to static html and put them in the output folder, maintaining…
Matthew
  • 952
  • 7
  • 20
4
votes
1 answer

webpack 4 pug loader image url not correct

according to the doc of pug loader Embedded resources Try to use require for all your embedded resources, to process them with webpack. div img(src=require("./my/image.png")) and it looks working with me the terminal emitted my image and no error…
Ayman Morsy
  • 1,279
  • 1
  • 10
  • 28
4
votes
1 answer

html-webpack-plugin with pug-loader not picking up options

Consider: plugins: [ new HtmlWebpackPlugin({ template: 'index.pug', title: 'Page Title', custom: 'Custom' }) ] Inside index.pug: doctype html html head meta(charset="utf-8") meta(http-equiv="X-UA-Compatible"…
Ivan
  • 97,549
  • 17
  • 50
  • 58
4
votes
1 answer

Express, Pug and Webpack

I have a Node js server app which uses Express and Pug. I would like to bundle it to single script which can be deployed by pm2. There seem to be several problems with this. In runtime I get Cannot find module "." and during compilation few…
ps-aux
  • 11,627
  • 25
  • 81
  • 128
4
votes
2 answers

Pug templates with the HTML Webpack Plugin

I'm currently trying to get Pug templates running with the HTML Webpack Plugin. I followed their instruction to be able to use a custom template engine like Handlebars or in my case Pug. When I execute it, I'm getting this error: ERROR in…
Simon Knittel
  • 1,730
  • 3
  • 15
  • 24
4
votes
2 answers

How do I get webpack to rewrite image sources from pug?

I am writing an Angular 2 application and want to use pug for my templates. I am using webpack to build the solution. If I just use { test: /\.pug$/, loader: 'pug-html-loader' }, in the webpack config file, the URLs of the image files are…
Tor Livar
  • 1,193
  • 1
  • 9
  • 9
1
2 3 4 5 6 7