Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

175
Views
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 Modules: that page makes it clear that file-loader was the old solution, for Webpack 4.

So far I failed to get it to work though. These are a couple of configurations I tried in my webpack.config.js's module.rules:

1. Using the pug-loader only
{
    test:path.resolve('./html/index.pug'),
    type:'asset/resource',
    loader:'pug-loader',
    generator:{filename:'index.html'}}
}

This creates a dist/index.html file which contains the following:

var pug = require("!../node_modules/pug-runtime/index.js");

function template(locals) {var pug_html = "", pug_mixins = {}, pug_interp;pug_html = pug_html + "\u003C!DOCTYPE html\u003E\u003Chtml lang=\"en\"\u003E\u003Chead\u003E\u003Ctitle\u003E" + (pug.escape(null == (pug_interp = "Hello World") ? "" : pug_interp)) + "\u003C\u002Ftitle\u003E\u003C\u002Fhead\u003E\u003Cbody\u003E\u003Cp\u003EHello World\u003C\u002Fp\u003E\u003C\u002Fbody\u003E\u003C\u002Fhtml\u003E";;return pug_html;};
module.exports = template;

It looks like pug-loader converts the pug file into a JavaScript module which generates the html code when it's called. What I want is the resulting HTML code, instead of a JS function that generates it.

2. Using val-loader to execute the JavaScript module generated above
{
    test:path.resolve('./html/index.pug'),
    type:'asset/resource',
    use:['val-loader','pug-loader'],
    generator:{filename:'index.html'}}
}

This doesn't work either: Webpack throws an error when it tries to build dist/index.pug:

ERROR in ./html/index.pug
Module build failed (from ./node_modules/val-loader/dist/cjs.js):
Error: Unable to execute "/home/bluenebula/work/webpack5-test/html/index.pug": Error: Cannot find module '!../node_modules/pug-runtime/index.js'

Note that /home/bluenebula/work/webpack5-test/node_modules/pug-runtime/index.js does exist.

Question

  1. Are Asset Modules the right tool to generate an HTML file from a Pug one using Webpack 5?

  2. What else am I supposed to do?

  3. How do I get it to work?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

(Pug 3.0.2)
I replaced the loader 'pug-loader' with '@webdiscus/pug-loader',
and it works.

plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src/index.pug'),
      filename: 'index.html',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: '@webdiscus/pug-loader',
      },
    ],
  },

The reference I followed : https://github.com/webdiscus/pug-loader#usage-in-javascript

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!