2

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?

Blue Nebula
  • 932
  • 4
  • 9
  • Does this answer your question? [How to output html files from pug templates with webpack?](https://stackoverflow.com/questions/44792582/how-to-output-html-files-from-pug-templates-with-webpack) – Parzh from Ukraine Dec 08 '21 at 22:09
  • @DimaParzhitsky no, those answers are for Webpack 4 and use `file-loader`, `html-loader` etc. Those loaders were used in Webpack 4, but Webpack 5 introduces a new solution (Asset Modules) which is what I'm trying to use, failing: https://webpack.js.org/guides/asset-modules/ – Blue Nebula Dec 08 '21 at 22:11

1 Answers1

1

(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

BanChing
  • 11
  • 1