问题标签 [pug-loader]

我想为我的 webpack 配置中生成的图像添加内容哈希。这些文件是用哈希输出的，但我不确定如何将它们插入到我的 html 中。Html with 是用 pug 和 HtmlWebpackPlugin 生成的。

webpack.config.js 的相关部分：

哈巴狗中的图像，我想要正确的文件名输出：

我希望能够创建许多具有不同数据的相同块。例如具有不同名称和值的项目列表。

所以我有一个这样的哈巴狗文件：

我的 JSON 文件 data.json 是这样的：

我还想加载不同的 json 数据并将其与我的项目 mixin 一起使用来构建不同的块

但是 gulp 没有编译这段代码并在我的 pug 文件上抛出错误“write after end”

我还为我的 gulp taks 添加了一些带有“locals”的代码：

但这没有帮助。知道我可以从 gulp 任务中传递 json 数据。但是有2个问题：

1. 我不想在 gulp 任务中传递这些 json，因为如果我有新文件，我应该将它写在 gulp 任务文件中。
2. 这也不起作用并抛出相同的“结束后写入”错误

有没有一种简单的方法可以在 pug 模板中使用 JSON 数据

我正在尝试使用以下代码将 Pug 的主目录设置为 Galp：

但是在执行任务时，我收到此错误：

我究竟做错了什么？

该项目

我有一个项目，其中网站视图是使用 Pug 编写的，然后编译为 HTML。

index.pug ---> index.html

因为我希望项目有不止一页，所以我也得到了这个：

about.pug ---> about.html

现在，这些页面中的每一个都有条目，在webpack.config.js：

我认为两者都使用一个包并不好，因为导入的模块对于每个页面条目都是唯一的（也就是说：如果我知道我在说什么）。

问题

生成 HTML 时，会自动在两个页面html-webpack-plugin中注入两个捆绑包，这比我刚才解释的要糟糕。

我怎样才能告诉它只注入我想要的包？

ps：我尝试在*.pug文件中手动包含它们中的每一个。虽然，生成的捆绑文件名具有哈希值，以实现缓存清除。

我的 webpack 和 pug 配置有问题。图像未显示（我收到 404 错误）

这是：webpack.common.js

下一个文件 webpack.dev.js：

最后是哈巴狗索引页面：我尝试了多个 url，它们都不起作用。

问题的本质是：有一个基于 webpack 的构建，一切正常，但有一个例外：更改 PUG 文件时。项目已重建，但内容未在浏览器中更新。构建时会产生错误：Entrypoint undefined = ./index.html

项目结构： 此处输入图片描述

我有一个大项目。我使用 Pug 构建 HTML，使用 SASS 构建样式。我的项目包含 35 页，包含包含和混合。以及其他基本的东西，如图像、样式和脚本。 开发模式下的初始构建需要 10 分钟。在生产中 - 6 分钟。

我觉得太慢了。

如何提高建造速度？是否可以让 Webpack 更快地构建 Pug？

测速日志截图

网络包配置：

PS我的堆栈对于这样的大项目是否正确？

提前感谢您的答案。

当我想把 js 文件我得到这个错误

HTML

项目结构

在 Vue 模板中，我在 pug 语法中有这个 html

在脚本标签中，我使用 axios 从 json 文件中获取数据。

我的问题是如何从players财产中获取数据cards？

用来pug-loader写我的html。根据它的说明，我require()用于模板内的资产路径，直到最近，当我Cannot GET在对模板进行更改时开始收到所有资产路径的错误时，一切都运行良好。但是他们在服务器启动时工作正常。Minimal repro 没有表现出这种行为，所以它必须对我的项目做一些事情。

目录结构：

Webpack 配置 (v5.24.3) 如下所示：