5

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

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

4

2 回答 2

11

用于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$/));
于 2017-02-20T03:12:16.397 回答
0

这可以通过 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。

于 2022-01-09T07:31:09.023 回答