使用Webpack来简单编译一组Pug模板到HTML

Question

我正在使用webpack入门，但唯一我无法解决的问题是如何将一个包含可能嵌套文件夹的.pug模板文件夹编译成静态html并放置在输出文件夹中，同时保留源模板文件夹中每个输出html文件的任何嵌套文件夹结构...

我不想手动指定每个单独的.pug文件，而且我绝对不希望webpack尝试将.pugs解析为JS，然后尝试要求/导入pug文件中的任何imgs/fonts等内容，然后抱怨它，我只需要基本的静态1:1编译，输入pug文件，输出html文件。为什么这么难呢？

- Matthew

---

如果你主要不是处理JS文件，使用gulp会更容易些，虽然webpack也可以实现。 - Bryan Chen

我宁愿不在每个项目中添加Gulp及其依赖项...您说使用Webpack是可能的，您能详细说明一下吗？ - Matthew

展示你现有的Webpack配置。你可以使用function requireAll (r) { r.keys().forEach(r); } requireAll(require.context('./src', true, /\.pug$/));来引入位于src文件夹下的每个.pug 文件，并配置 file-loader 来进行复制。 - Bryan Chen

我需要在那里使用提取文本插件吗？ - Matthew

我想从每个Pug文件保存静态HTML文件，我认为提取文本插件是实现这一目的的方法？就像你必须使用提取文本插件从sass-loader保存.css文件一样，难道你不必使用提取文本来保存pug-loader生成的.html文件吗？ - Matthew

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

- Bryan Chen

---

我有另一个问题 - 假设我使用这个 require.context('./pug/', true, /\.pug$/)，它会在pug文件夹中查找，但是当我使用file-loader和查询参数name=[path][name].html时，模板会被放入我的构建目录中的pug文件夹中。例如，如果某个源pug模板位于/pug/home/template.pug，则最终会得到/dist/pug/home/template.html，但我希望它是dist/home/template.html。是否有一种方法来控制file-loader查询字符串中[path]将输出什么？ - Matthew

尝试使用 file-loader?name=[path][name].html&context=./pug，你可能需要更改上下文参数以使其正常工作。 - Bryan Chen

我又回来了，这次是关于另一件事——使用这种方法后，在我的主bundle.js中，我现在有一堆pug文件的条目，尽管它们不需要在那里——例如```(function(module, exports, webpack_require) {module.exports = webpack_require.p + "layouts/default.html";/***/ })```。我该如何摆脱这些条目？ - Matthew

你可以将 requireAll 调用放到一个新的入口文件中，并忽略它的 js 输出。 - Bryan Chen

出于好奇，当我使用ExtractTextPlugin提取我的scss/sass文件时，即使我将我的主scss文件作为入口点，也没有生成与之对应的输出包...因此，插件可以接受入口点，并且不会对任何匹配它的导入/要求发出捆绑包？也许我可以使用某种“null”插件来停止Webpack为pug要求发出捆绑文件？ - Matthew

Answer 2

只需使用html-webpack-plugin和pug-loader即可轻松完成此操作。

webpack.config.js

const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // No javascript entrypoint to evaluate. Let the plugin do the heavy lifting
  entry: {},
  // Translate Pug to HTML
  module: { rules: [ { test: /\.pug$/, use: 'pug-loader' } ] },
  // Save HTML to file
  plugins: [ new HTMLWebpackPlugin({ template: './src/index.pug' }) ]
};

./src/index.pug

doctype html
html(land="en")
  head
    include path/to/another.pug
...

我从https://extri.co/2017/05/23/using-htmlwebpackplugin-and-pug/获取了这些信息，您也可以像使用html-webpack-plugin一样导入css和javascript。

- RWDJ

---

你救了我的命，我正在尝试类似这样的东西。但是当我没有定义 entry: {} 时，由于加载器和解析 .pug，它一直在尝试在 src 中找到一个 index.pug 文件。 - codermarcos