1

我想构建html/index.pug使用dist/index.htmlWebpack 5。

我曾经使用 Webpack 4 来file-loader实现这一点，但它在 Webpack 5 中似乎已被弃用：在Loaders页面中没有提及它。Webpack 5 解决方案似乎正在使用Asset Modules：该页面清楚地表明这file-loader是 Webpack 4 的旧解决方案。

到目前为止，我还没有让它工作。这些是我在我webpack.config.js的 's中尝试过的几个配置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 Modules 是使用 Webpack 5 从 Pug 生成 HTML 文件的正确工具吗？

  2. 我还应该做什么？

  3. 我如何让它工作？

4

0 回答 0