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
3
votes
1 answer

Html-Webpack-Plugin very slow on multiple pug file

I have a project that use webpack as bundler and webpack-dev-server during my development process. I use Html-webpack-plugin the compile my 30 pug file into html but when used with webpack-dev-server, recompile time is very long, maybe 5mn. Seems…
3
votes
2 answers

Can Webpack build multiple HTML files from SCSS and Pug?

I've read quite a few tutorials on webpack, but it seems more for creating web apps then for what I'm trying to do so I didn't want to waste any more time if the following isn't possible. I'm creating websites on a third-party eCommerce system and…
Blake Bell
  • 376
  • 5
  • 16
3
votes
0 answers

Webpack-Serve's HMR not reloading on included pug-files

Good morning. I have webpack with pug-loader. When I include one pug-file in other pug-file, Webpack compiles new HTML, but Webpack Serve not updating page. How can I fix it? I had idea to require/import pug-files into JS-files, but I think, it is…
3
votes
0 answers

Use/include webpack bundled assets in pug template

Here is my scenario: I want to use ES6/7 in both client(React) and server(Express), plus PostCSS for CSS, so I need webpack + babel. Several routes render page hosting React Components, some(React Components) trivial, some heavy. I want to use pug…
Xiaotian Guo
  • 1,635
  • 3
  • 17
  • 21
3
votes
1 answer

Webpack Config for Static Pug/HTML Pages

I'm transitioning a site to use Webpack, and I need a little help with configuration. I have a few pages written in Pug/Jade that are large and infrequently accessed (think Terms of Service or Privacy Policy). Most of my .jade files are Angular…
Eric Simonton
  • 5,702
  • 2
  • 37
  • 54
2
votes
1 answer

Build `html/index.pug` into `dist/index.html` using Webpack 5

I'd like to build html/index.pug into dist/index.html using Webpack 5. With Webpack 4 I used to use file-loader for this, but it seems deprecated in Webpack 5: no mentions of it in the Loaders page. The Webpack 5 solutions seems to be using Asset…
Blue Nebula
  • 932
  • 4
  • 9
2
votes
0 answers

How to increase building speed (Webpack, Pug, SCSS)?

I have big project. I use Pug for building HTML and SASS for styles. My project contains 35 pages with includes and mixins. And other basic things like images, styles and scripts. Initial building in development mode takes 10 minutes. In production…
2
votes
1 answer

How use JSON variable inside of pug template

I want to able create many identical blocks with different data. For exaple list of items with different names and values. So I have a pug file like this: - var data = require("data.json") mixin item(name,val) .item .item-name= name …
2
votes
1 answer

webpack set the outputPath relative to the file where require occurs

Is there a way to hint webpack to generate output files relative to the file where the generated file occurs as required? Suppose I have the following configuration: let indexHTML = new HtmlWebpackPlugin({ template: "./src/pug/index.pug", …
user3808059
  • 373
  • 2
  • 15
2
votes
0 answers

Issues setting up Parcel with Pug and multiple entry points

I am trying to set up Parcel with Pug and multiple entry points. I have combed through the docs but I cannot figure out what I am doing wrong. Right now I have two main issues: The CSS is only being loaded into about.html on build and not…
Joel Hoelting
  • 1,862
  • 2
  • 23
  • 45
2
votes
1 answer

Render a static html with webpack generated class names

I am trying to get Webpack to render a static html and export relative css, starting from a pug template and css modules using HtmlWebpackPlugin. My setup is as follow //webpack.config.js ... plugins: [ new CleanWebpackPlugin(), new…
Sal
  • 814
  • 6
  • 12
2
votes
1 answer

Can't make Webpack "live reload" features with an Express+Pug (Jade) web app

I've searched here and there very few questions using Pug (Jade) and even fewer answers. I thought looking code in GitHub would give me an answer but has only brought more confusion, outdated code, and repos that don't work. What I want is very…
Neithan Max
  • 11,004
  • 5
  • 40
  • 58
2
votes
0 answers

How to properly bundle Express server and PUG engine with Webpack?

If a pug template served by Express lives in ./src/client/views/index.pug. And Webpack is bundling the Javascript / CSS and has a config to output a pug file.. new HtmlWebpackPlugin({ template: './src/client/views/index.pug', }), And…
GN.
  • 8,672
  • 10
  • 61
  • 126
2
votes
0 answers

How can I run the grunt file in watch mode and also enable live reloading?

require( 'time-grunt' )( grunt ); require( 'load-grunt-tasks' )( grunt…
2
votes
0 answers

Failed loading app.styl when using Aurelia CLI with webpack, stylus and pug

I can't entirely get the configuration right to make pug work with Aurelia CLI (0.33.1) and am hoping someone knows enough about webpack loaders to help me out. I get the error Failed loading required CSS file: app.styl. I've created two minimalist…
jdp
  • 744
  • 8
  • 8