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

Question

我开始使用 webpack，但我终生无法解决的一件事是如何获取一个充满 .pug 模板的文件夹（可能包含嵌套文件夹），并将它们简单地编译为静态 html 并将它们放在输出文件夹中，为源模板文件夹中的每个输出 html 文件维护任何嵌套文件夹结构...

我不想手动指定每个单独的 .pug 文件，我绝对不希望 webpack 尝试将 .pugs 解析为 JS，然后尝试 require/import imgs/fonts 等在 pug 文件中，然后抱怨它，我只是在基本的静态 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$/));

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.哈巴狗

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。

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

Webpack to simply compile a bunch of Pug templates to HTML

javascript

webpack

pug-loader