问题标签 [pug-loader]

根据哈巴狗装载机的文档

嵌入式资源

尝试对所有嵌入式资源使用 require，以使用 webpack 处理它们。

它看起来和我一起工作终端发出了我的图像并且没有错误

但是url路径不正确

编码：

产生这个奇怪的 url 对象：

我正在运行哈巴狗 CLI

哈巴狗 src --out web --watch

如果我有

在 index.pug 中：include includes/scripts.pug

使用此设置，如果我修改 scripts.pug，它会生成我不需要的 web/includes/scripts.html，为了保持清洁，我不想这样做。

有没有办法避免某些文件/目录编译？（目前一种解决方法是包含 html 形式的内容，但也许有办法）

我真的是 Webpack 4 的新手，发现了一个我无法解决的配置问题。

我正在为多页应用程序配置 Webpack。HTML 模板引擎是PUG。文件编译正确，但是当我创建包时，Webpack 也在编译我在“src/pug/mixins”文件夹中的 mixins。因此，我从我拥有的每个 .pug 混合文件中获取一个 .html 文件。

如何告诉 Webpack 不要从文件夹内的 mixins 生成 .html 文件？

我的 webpack.config 文件中有以下内容：

但是，utils 文件夹中的所有 mixin 都被转换（即： utils/coreMixins.pug -> utils/coreMixins.html ）

感谢您的回答

你能帮我在 laravel-mix-pug 之后的一行中的 html 缩小代码吗？

我的代码现在不起作用，我不知道是什么原因：

想知道是否有人可以提供帮助？我正在尝试学习如何使用 NestJS微服务。我已经成功地获得了一个带有 MQTT 传输设置的微服务来接收来自 API 的事件。我正在尝试使用pug将事件信息与 html 模板文件合并。但是 pug 找不到模板文件...

我使用记录器来显示__dirname，它指的是 dist 目录。这里面有一个文件 main.js。如何从 nestjs 微服务捆绑和读取模板 pug 文件？

这篇文章有一个类似的问题，但它是针对一个 nestjs 应用程序的。

有没有办法提示 webpack 根据需要生成相对于生成文件所在的文件的输出文件？假设我有以下配置：

在此配置中，HtmlWebpackPlugin 生成了两个 html 页面：一个是“dist/index.html”（“dist/”是我的输出文件夹），另一个是“dist/examples/index.html”（即“index.html”）。 'examples/' 文件夹中的 html'，HtmlWebpackPlugin 将为我创建）。

当文件加载器在我生成的 html 文件中遇到 require/import 语句时，它会尝试将其解析为 url 并将该文件从我的工作文件夹结构复制到输出文件夹中。在 file-loader 的 outputPath 中，我为输出内容（“imgs”、“video”等）指定了相对路径，这些路径将作为 file-loader 生成的每个 url 的前缀，从而在每个相应的 html 中生成相对 url .

问题是，文件夹本身将在输出文件夹（在我的情况下为“dist”）中生成，而不是在输出文件夹结构中出现相应 html 的位置。也就是说，在 'dist/examples/index.html' 中引用的所有 .css 文件都将放入 'dist/css/' 文件夹中，因此不会在 'dist/examples/index.html' 中看到，它只包含相对路径（'css/'）。

重申我的问题：如何使文件加载器生成相对于它们被引用位置的输出文件？也就是说，我希望文件加载器将“dist/examples/index.html”中引用的任何 .css 文件输出到“/dist/examples/css/”。

我有一个带有对象（字体字符的名称/代码）的 JSON 文件，我希望将它导入到 Pug 文件中，我正在使用 Grunt 作为任务运行器。

我希望在列表中显示每个字符，例如：

PUG 需要图像（webpack）

pug + webpack 中的图像处理问题。在 PUG 的早期，我不通过 loader 处理图片。我使用了 WebpackCopyPlugin，并写了绝对路径。

像那样：

当我构建项目时，WebpackCopyPlugin 复制了所有图片，使用正确的路径编译了 pug，一切正常。现在我需要通过 Loader 处理图片。根据文档，我需要这样编写路径：img (src = require ('./img.png')) 但通常它不能正常工作。我发现了几个场景。在 src/assets/img 文件夹中有几张图片。

1.

或者

一切正常，在组装过程中我们有 1 个文件 1-1.png。这里我没有在 require 中使用变量，因此这些选项不适合

2.开始使用变量：

或者

或者

或使用 mixin

在开发模式下一切都很好。项目构建后，发生以下情况 - 文件加载器从文件夹中复制所有文件，尽管我只指定了 1。它是这样发生的：

• 资产
  • 图像
    • 1-1.png
    • 2-2.jpg
    • 图标
      • 3.svg
    • 图片
      • 3.png
      • 3.jp2
      • 3.jxr

项目构建后，文件夹 public(dist)/assets/img 中将包含除 3.jp2 3.jxr 之外的所有文件（3.png 和 3.svg 也将被复制，即使它们在文件夹中）。这个选项也不合适。我只想接收我指定的那些文件。

3.开始实验

我在开发中遇到错误并同时构建：

throw new Error('回调已被调用。'); ^ 错误：回调已被调用。

也是一个错误

4.

或者

错误：找不到模块“../../../../assets/img/1-1.png”

错误：找不到模块“../../../../assets/img/1-1.png”

对于任何文件加载器配置，这完全取决于我是否在 equire 中使用变量

问题是什么？

我的 webpack 配置：

在这种当前情况下，grunt 确实会查看子文件夹中的文件，但没有编译到 dist。请参阅我的 gruntfile 的（部分）：

我猜这可能是因为包含文件夹等（应该出现在 dist 文件夹中）。如何修改我的设置，以便 grunt 编译一些特定的子文件夹和文件？

我同时使用 vue 单文件组件，并分别将标记和逻辑.pug与.ts文件分开。如果您对我不统一的原因感兴趣，请参阅评论部分。

问题

在开发构建模式中导出的模板是正确的（为了便于阅读，我对其进行了美化）：

在生产模式下，我的标记已小写。所以，console.log(template)输出：

当然，我的视野不好。

Webpack 配置

评论

老实说，我不知道我们为什么需要?in resourceQuery: /^\?vue/u,（欢迎解释）。但是，在上面的开发构建模式下，configxxxx.vue和xxxx.vue.pug文件都具有工作属性。

我正在使用以下文件命名约定：

• xxx.pug: pug 文件，不会用作 vue 组件模板。
• xxx.vue.pug: pug 文件，将用作 vue 组件模板。
• xxx.vue: 单文件 vue 组件。
• xxx.vue.ts：vue组件的逻辑。需要导出的模板xxx.vue.pug，InputField以防万一。

为什么我需要xxx.vue.ts？因为这：

对于 TypeScrptxxx.vue文件，公共方法/字段和非默认方法均不可见。对于常见的（未应用的）组件，我无法接受。

复制品

GitHub

第 1 步：安装依赖项

第 2 步：让我们先检查开发建筑

在第156行DevelopmentBuild\EntryPoint.js，您可以检查以下 pug 模板：

已正确编译：

第 3 步：生产构建问题

您可以在第13列中找到小写的标签：

您也可以index.html在浏览器中打开并console.log()使用已编译的TestComponent.