使用Webpack 5将` `html/index.pug`构建为‘`dist/index.html’

Question

我想用Webpack 5把html/index.pug构建成dist/index.html。

对于Webpack 4，我曾经使用过file-loader，但在Webpack 5:在装载机页面中没有提到它，这似乎是不可取的。Webpack 5的解决方案似乎是在使用资产模块：这一页清楚地表明，对于Webpack 4来说，file-loader是旧的解决方案。

不过，到目前为止，我还是没能让它发挥作用。这是我在webpack.config.js的module.rules中尝试过的几种配置。

1.仅使用pug-loader

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

这将创建一个包含以下内容的dist/index.html文件：

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;

看起来，pug-loader将pug文件转换为一个JavaScript模块，在调用它时生成html代码。我想要的是得到的HTML代码，而不是生成它的JS函数。

2.使用val-loader执行上面生成的JavaScript模块

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

这也不起作用: Webpack试图构建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'

注意，/home/bluenebula/work/webpack5-test/node_modules/pug-runtime/index.js确实存在。

问题

1. Asset是使用Webpack 5从Pug文件生成HTML文件的正确工具吗？
2. 我还能做什么？
3. 我怎么才能让它起作用？

Answer 1

(Pug 3.0.2)

我用“帕格装载机”替换为“@webdiscus/pug-载入器”，

而且起作用了。

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

我所遵循的参考：https://github.com/webdiscus/pug-loader#usage-in-javascript