Me gustaría compilar html/index.pug en dist/index.html usando Webpack 5.

Con Webpack 4 solía usar file-loader para esto, pero parece obsoleto en Webpack 5: no se menciona en la página de Cargadores . Las soluciones de Webpack 5 parecen estar usando módulos de activos : esa página deja en claro que file-loader era la solución anterior, para Webpack 4.

Sin embargo, hasta ahora no pude hacerlo funcionar. Estas son un par de configuraciones que probé en mi webpack.config.js de module.rules :

1. Uso exclusivo pug-loader

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

Esto crea un archivo dist/index.html que contiene lo siguiente:

 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;

Parece que pug-loader convierte el archivo pug en un módulo JavaScript que genera el código html cuando se llama. Lo que quiero es el código HTML resultante, en lugar de una función JS que lo genere.

2. Usar val-loader para ejecutar el módulo JavaScript generado anteriormente

 { test:path.resolve('./html/index.pug'), type:'asset/resource', use:['val-loader','pug-loader'], generator:{filename:'index.html'}} }

Esto tampoco funciona: Webpack arroja un error cuando intenta compilar 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'

Tenga en cuenta que /home/bluenebula/work/webpack5-test/node_modules/pug-runtime/index.js existe.

Pregunta

1. ¿Son los módulos de activos la herramienta adecuada para generar un archivo HTML a partir de un Pug usando Webpack 5?

2. ¿Qué más se supone que debo hacer?

3. ¿Cómo hago para que funcione?