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$/));