Webpack简单地将一堆Pug模板编译为HTML

Question

我开始使用webpack,但有一件事我无法解决的问题是如何获取一个文件夹(带有可能的嵌套文件夹),完整的.pug模板,只需将它们编译为静态html并将它们放在输出文件夹中,为源模板文件夹中的每个输出html文件维护任何嵌套文件夹结构...

我不想手动指定每个单独的.pug文件,我绝对不希望webpack尝试将.pugs解析为JS然后尝试在pug文件中要求/导入任何imgs/fonts等然后抱怨关于它,我只是在一个基本的,静态的1:1编译,pug文件,html文件中.为什么这么难？

Answer 1

使用pug-html-loader转换.pug为.html文件.使用file-loader复制文件到所需的位置.不要使用,html-loader因为您不想处理生成的文件使用的资源.

您将在加载器规则中结束类似这样的事情(未经测试,webpack 1语法,您可能需要为webpack 2调整它)

{
    test: /\.pug$/,
    loaders: ['file-loader?name=[path][name].html', 'pug-html-loader?pretty&exports=false']
}

接下来,您需要在输入文件中要求所有的pug文件

function requireAll (r) { r.keys().forEach(r); }
requireAll(require.context('./', true, /\.pug$/));