问题标签 [pug-loader]

这是我的场景：

• 我想在客户端（React）和服务器（Express）中都使用 ES6/7，加上 CSS 的 PostCSS，所以我需要 webpack + babel。

• 几个路由渲染页面托管 React 组件，一些（React 组件）微不足道，一些沉重。

• 我想使用 pug 作为视图引擎，将整个应用程序放在一个 SPA 中不是一种选择。

我的设置在开发模式下工作（在我的哈巴狗模板中，我将捆绑资产直接包含在带有脚本标签的构建目录中，问题出在生产模式下，捆绑的 js 文件的路径包含哈希并且是动态的。

这个问题的常见做法似乎是使用 HtmlWebpackPlugin，它可以将动态捆绑的 js 路径注入到您的模板中。问题是，我在 pug 中有很多视图模板，我无法在 webpack.config.js 中为每个模板添加一个条目。我正在探索的选项是让 webpack 生成一个仅包含资产的“部分”，包括像 and 之类的标签，然后在我的视图模板中包含这个“部分”。但是 HtmlWebpackPlugin 不适用于哈巴狗。经过一番挖掘，我发现了另一个人们使用的 webpack 插件——pug-loader。但似乎它只会将 pug 转换为纯 HTML。这意味着我不能将它作为 pug 文件包含在我的所有视图模板中。

这必须是一个已解决的问题，但我似乎无法找到解决方案。

先感谢您！

两者似乎pug-loader都pug-html-loader专注于将 Pug 模板预编译为 HTML。我不想这样做，因为我需要一些只有在渲染模板时才能获得的动态渲染功能，比如能够传入页面的标题，作为一个简单的例子。

然而，我想做的是使用 Webpack 来处理 Pug 模板，以便遍历它们，找出它们使用的图像，并将这些图像加载到/dist文件夹中。我还希望能够url-loader在可能的情况下将数据 URL 内联到 Pug 模板中，这意味着它们需要在此过程中被复制和修改。

是否可以将 webpack 输出到jade/pug 文件而不是 html？我发现的每个包都相反，jade/pug -> html。

目前我只是/dist/index.html在运行后使用 html2jade.com 转换为翡翠npm run build，但我想跳过一个步骤，只是让 webpack 在翡翠中输出它

我正在尝试使用基于以下技术的技术堆栈使用 Webpack 创建环境：

• 哈巴狗，用于模板 HTML
• sass，用于 CSS
• ES7

但是我在创建 pug HTML 文件时遇到了问题。

这是我的 webpack.config.js 文件的要点https://gist.github.com/anonymous/84c02222a44ce219c35ff1a8beeff720

我到底想要实现什么：

我有一个基于的文件夹结构

• 应用程序

  ./哈巴狗

  ./components, ./views

我想要做的是编译视图文件夹中的每个 pug 文件并将其转换为 HTML 并将其发送到 dist 文件夹。

你们能帮帮我好吗？

谢谢。

我创建了一个 Web 应用程序，并且正在使用 pug 文件生成我的 index.html。

pug 模板需要从 json 文件中获取数据，到目前为止，我设法使用 pug-loader 和 pug-html-loader 注入数据。

当我使用热重载（使用 webpack-hot-middleware）运行应用程序时，问题就来了。当我更改 json 文件时，应用程序不会重新加载，这真的很烦人，因为任何其他文件更改都会触发重新加载，而且我不想在每次更改 json 文件时手动重新启动应用程序。

这是我的 webpack 配置：

有谁知道我如何更改 pug.json 触发热重载？

我不知道如何在我的哈巴狗模板中访问 JSON 数据。

这是我的哈巴狗布局

正在初始化页面变量的 Pug 页面

Webpack 部分

JSON

我正在使用 webpack v4 并且我正在尝试使用Pugwithwebpack-dev-server但是当我运行webpack-dev-server --mode development它时不提供已编译Pug的 . 请帮忙。我不知道该怎么办。谢谢您的回复。这是我的配置：

我不能完全正确地配置使 pug 与 Aurelia CLI (0.33.1) 一起工作，我希望有人对 webpack 加载器有足够的了解来帮助我。我得到错误Failed loading required CSS file: app.styl。

我使用 cli 和 stylus 创建了两个极简主义项目：

1. cli 和标准选项（包括使用手写笔）
2. 与 #1 相同，除了修改为支持哈巴狗
   • 修改说明在这里
   • 在此处链接到此示例 Aurelia 项目

使用＃1，如果我app.styl使用其中的 a 创建和引用它<require from="app.styl"></require>，app.html它会很好地加载。但是对于#2，它没有。有任何想法吗？

除了第一个问题之外，我的下一个未解决的问题将是弄清楚如何将 locals 传递给index.pug，因为它pug-loader返回一个函数并apply-loader在加载器链中需要。

重复示例项目中的代码：

rules: { test: /\.pug$/, loaders: [ { loader: 'apply-loader' }, { loader: 'pug-loader', options: { pretty: true } } ] },

plugins: new HtmlWebpackPlugin({ template: 'index.pug', inject: true, // not sure if this is needed, or why metadata: { // wish to make this available in index.pug, but failing title, server, baseUrl } }), new AureliaPlugin( { viewsExtensions: '.pug' } ),

我正在尝试使用 webpack看起来.pug非常基本的东西：使用 Javascript 包含和.scss文件，import并让编译导出相应的.htmland.css和extract-loaderand file-loader。

为了便于重现/演示，我在这里创建了一个仓库：https ://github.com/brianmhunt/broken--pug-loader

最小的 webpack 配置非常简单，即：

这些文件设置/包含为：

只有来自one.pug和three.pug结束的内容index.html，并且只有abc和ghi，css所以看起来第二个文件被extract-loader.

在其他选项中，我尝试了，concat-loader但我的实验没有产生任何有用的结果。

要复制问题：

早上好。我有带有 pug-loader 的 webpack。

当我在另一个 pug 文件中包含一个 pug 文件时，Webpack 会编译新的 HTML，但 Webpack Serve 不会更新页面。我该如何解决？

我有想法将 pug 文件要求/导入到 JS 文件中，但我认为这不是最好的方法。

UPD：Webpack-服务日志

指数.pug

webpack.development.config.js

项目结构