Webpack 简单地将一堆 Pug 模板编译成 HTML答案

【问题标题】：Webpack to simply compile a bunch of Pug templates to HTMLWebpack 简单地将一堆 Pug 模板编译成 HTML
【发布时间】：2017-07-09 00:06:41
【问题描述】：

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

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

【问题讨论】：

webpack 可以，但如果你不是主要处理 js 文件，使用gulp 会更容易
id 而不是将 gulp 及其依赖项也添加到每个项目中......你说它可以使用 webpack，你能详细说明一下吗？
显示你现有的 webpack 配置。您可以使用function requireAll (r) { r.keys().forEach(r); } requireAll(require.context('./src', true, /\.pug$/)); 要求 src 文件夹下的每个 .pug 文件并配置 file-loader 进行复制
我不必在某处使用提取文本插件吗？
如何提取与您的问题相关的文本插件？

标签： javascript webpack pug-loader

【解决方案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$/));

【讨论】：

我还有一个问题 - 说我使用这个 require.context('./pug/', true, /\.pug$/) 所以它在 pug 文件夹中查找，目前当我使用带有 name=[path][name].html 查询参数的文件加载器时，模板正在被放置进入我的构建目录中的 pug 文件夹。例如，如果某个源哈巴狗模板位于/pug/home/template.pug 中，我最终会得到/dist/pug/home/template.html，但我希望它是dist/home/template.html 有没有办法控制文件加载器查询字符串中的[路径] 将输出什么？
试试file-loader?name=[path][name].html&context=./pug，您可能需要更改上下文参数才能使其工作
我又带着别的东西回来了——使用这个方法，在我的主 bundle.js 中，我现在有一堆 pug 文件的条目，即使它们不需要在那里——例如@987654332 @我如何摆脱这些？
你可以把requireAll调用放到一个新的入口文件中，忽略它的js输出
是的，我有一个单独的 pug 条目文件，我如何忽略 webpack.config.js 中该条目文件的输出？

【解决方案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。

【讨论】：