问题标签 [pug-loader]

我正在编写一个 Angular 2 应用程序并想将 pug 用于我的模板。我正在使用 webpack 来构建解决方案。

如果我只是使用

在 webpack 配置文件中，图像文件的 URL 不会被重写。所以我试着把哈巴狗改成

但这给出了这个错误：

因此，我正在尝试以下 webpack 配置：

但这给出了这个错误：

解决此问题的正确/最佳方法是什么？

我正在转换一个站点以使用 Webpack，我需要一些配置方面的帮助。我有几页是用Pug/Jade编写的，它们很大且不常访问（想想服务条款或隐私政策）。我的大部分.jade文件都是 Angular 模板，因此它们内联在它们的组件中并且效果很好。然而，这几个文件，我希望 Webpack 编译成与应用程序的其余部分分开提供的静态 HTML 文件。但是，我仍然希望他们的文件名包含哈希。

我想出的基本想法是这样的：

在routes.ts：

在webpack.config.js的装载机列表中：

我已经尝试了pug-loader、pug-html-loader（有和没有?exports=false选项）、html-loader、extract-loader、extract-text-webpack-plugin和file-loader 的各种组合，但我所做的一切尝试在结果.html文件中有额外的工件。例如，它可能以 . 开头module.exports =，或者它可能会放在\"文件中应该只有".

任何人都可以帮忙吗？

我尝试通过 webpack 管理所有需要的包，并且它与 sass 配合得很好（在从 Internet 学习如何做之后）。但我不明白为什么它对 pug 和 eslint 不起作用。eslint 的错误是找不到 .eslintrc 文件，是的，它不在根文件夹中。但是我在 eslint 字典中找到了两个。我是否必须将 .eslintrc.json / .js 复制到根目录中？而且 pug 没有给我任何错误，webpack 只是继续他的工作。

包.json

webpack.config.js

我的哈巴狗文件有以下配置...

这很好用，现在我想添加一个使用 url-loader 加载的图像。我的结构是这样的

我想在我添加的 pug 文件中包含 png ......

img(src="thing.png")

这没有解决，所以我尝试了类似img(src=require("thing.png")). 这些都不起作用。我尝试像这样添加 html-loader ...

但后来我得到...

这一切都在我的手写笔中正常工作......

我也试过...

并得到Cannot read property 'png' of undefined

另外，如果我用那里的html注释掉那条线，我会看到...

我如何在哈巴狗中需要图像？

我正在尝试使用 React 和 ES6 制作网站。我正在使用 Webpack 使用 Babel 转换我的 JS，它工作正常。现在我需要知道如何在 Pug（或 HTML）中编写我的模板并将其添加到 Webpack 工作流程中。我希望我的构建文件夹有两个文件：

1. 我的bundle.js
2. 我的文件从我的文件index.html编译而来index.pug

一个示例webpack.config.js文件会很有帮助，但我真正想要的只是如何做到这一点的一般想法。

谢谢！

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

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

我使用文件加载器自动将一堆 pug 模板渲染为静态 html 文件，但 webpack 也在输出基于入口点的无意义文件

例如，这是在我的 webpack.config.js 中：

我this-shouldnt-emit在根构建目录中获得了一个捆绑文件，这是我不想要的。

如何阻止文件加载器发出输出包，但不干扰它生成当前的所有静态 html 文件。是否有一个插件或某种空加载器可以放在加载器链的末尾来终止捆绑发射？

我正在使用 Webpack pug-html-loader + file-loader 来生成一堆静态 pug 模板。

我也想开始添加散列包文件名，但我不知道如何将散列文件名插入我所有的哈巴狗模板

这就是我目前在所有哈巴狗模板中引用我的包的方式：

我将如何修改它以引用bundle-[chunkhash].js/ bundle-[chunkhash].css]- 我需要将一些变量传递给 webpack.config.js 中的 pug-html-loader 吗？

注意：我正在使用 extract-text-plugin 将我的 SASS 输出到 .css 捆绑文件

我最近将一个 AngularJS (v1) 项目从 Webpack v1 更新到 v2，将 TypeScript v1 更新到 v2。该项目使用 pug 文件来生成视图，并且在升级之前没有问题。

自升级以来，控制器中引用的 pug 文件不再由 Webpack 处理。在任何路线中指定的 Pug 文件仍然可以正常工作。

我webpack.common.config.js的哈巴狗配置了哈巴狗装载机：

Webpack 不再处理的 pug 文件示例。

我试图通过使用显式引用 pug-loader

这与Github pug-loader 存储库中的 pug-loader 文档中的示例相匹配

这给了我错误：

ERROR in ./~/pug-loader!./src/app/components/ui/client.pug Module build failed: Error: C:\Users\User\git\myapp\node_modules\pug-loader\index.js!C:\git\myapp\src\app\components\ui\client.pug:4:1

我有一个带有显示问题的小应用程序的 Github。它位于MyApp Repository。如果您构建此应用程序，您可以看到 main.controller.ts 中引用的模板 pug 文件aboutPopup()显示了部分处理的代码。构建后，转到 Main 并单击 About 按钮。

我对使用 Visual Studio 比较陌生，但我正在处理的项目是一个.cshtml文件中包含多个页面的网站。我已经将 Webpack 设置为前端构建工具，并想开始使用Pug作为模板引擎。让构建工具将 Pug 模板编译成 HTML 并保持我的依赖性低，而不是 Visual Studio 编译它们（使用PugViewEngine 之类的东西）对我来说更有意义。

我是否应该创建一个/pug文件夹并开始将视图重新构建为.pug具有任何 Razor 语法的纯文本文件 - 然后使用 Webpack 编译为带有.cshtml文件扩展名的 HTML 并将其转储回/ViewsVisual Studio 项目的文件夹中 - 或者是有更好的方法来解决这个问题吗？