问题标签 [pug-loader]

我已经阅读了很多关于 webpack 的教程，但是对于创建 web 应用程序来说似乎更多的是我正在尝试做的事情，所以如果以下内容是不可能的，我不想再浪费时间了。

我在第三方电子商务系统上创建网站，他们有一个编码模板的系统，可以用来改变他们网站的结构。下面是我将创建的其中一个模板的示例（尽管我需要制作许多类型和变体，而不仅仅是几个）。

我简化这些模板的创建的想法是创建一堆 pug 组件并将它们放在 components/ 目录中。在组件目录之外，我想制作使用组件的更高级别的哈巴狗模板。一旦创建了这些，我将使用 NPM 构建它，并且需要将模板文件转换为 HTML 并放置在 /dist 文件夹中。

这很难用 webpack 做吗？

项目结构：

一旦建成：

模板示例：

我正在开发一个使用 Pugjs 作为模板引擎的项目。和 webpack 4 作为捆绑器。

当我更改.pug文件中的任何内容时，我必须手动重新运行编译器。

关于如何设置它的任何帮助，以便在我编辑文件后运行编译器？

webpack.config.js

更新 1 当我使用webpack命令时它工作正常，但它没有为 sue 创建开发服务器但是当我使用webpack-dev-server它时创建服务器但 dist 文件夹没有在终端中创建而没有错误！

我正在使用带有内置 Webpack 的 Vue CLI 3，并且我正在尝试将其index.pug用作源索引模板而不是默认 HTML。我想输出一个index.pug文件作为 webpack 进程的结果，以便 Node 服务器进一步填充动态数据。

这是我的vue.config.js：

不幸的是，上面失败了：

一些想法和假设：

• configureWebpack似乎设置正确（https://cli.vuejs.org/guide/webpack.html#chaining-advanced）
• HtmlWebpackPlugin可能不是要使用的插件，因为它的目的是生成 HTML 文件作为输出，但我什至无法成功完成

不幸的是，关于此主题的在线文档并不多，因此希望在这里获得帮助。谢谢。

我有一个项目在我的开发过程中使用 webpack 作为捆绑器和 webpack-dev-server。我使用 Html-webpack-plugin 将我的 30 pug 文件编译成 html，但是当与 webpack-dev-server 一起使用时，重新编译时间很长，可能 5 百万。似乎 webpack 编译了我所有的 pug 文件，而不是只编译我更改的文件。

这是关于我如何生成 html 文件的片段

我在 webpack.config.babel.js 文件中这样使用它

我正在将应用程序从哈巴狗翻译成HTML，但我遇到了一些关于空格的问题。

我正在使用 vue-loader (13.x) 和 webpack 3.x。

这段代码：

将在浏览器中翻译为：

虽然这段代码：

会正确翻译。

我希望将两段代码都转换为相同的 HTML <span>no whitespace</span>。我想要这个，因为当我将 pug 翻译成 HTML 时，我得到了一些我在 pug 上没有的奇怪间距。

我能做些什么？

--edit whit 我的实际代码和屏幕截图。

运行代码时默认为空格：https ://i.stack.imgur.com/Sz3dJ.png

当我让它看起来像哈巴狗结果时没有空格（只是删除控制台中的空格）：https ://i.stack.imgur.com/BWJxT.png

我正在使用带有 pug 的 Webpack4 作为我的模板引擎。我的配置已全部设置好，一切正常。

我想在我的哈巴狗模板中添加奇怪的内联 SVG 图标，并使用HtmlWebpackInlineSVGPlugin使用它，它适用于我的第一个 SVG，但不适用于我的第二个。

我的“通用”配置文件（根据 Webpack 文档，我也有 dev 和 prod 版本）：

这行得通

header.pug 模板

close-icon.svg 内容：

这显示很好。然而，另一个 SVG 不会使用相同的方法显示：

SVG 代码编译为 INDEX.HTML 文件，但图标不显示且位被剥离

search.pug 模板

search-icon.svg 内容：

生成的 html

所以<title>标签和下面的属性被去掉了，而且路径看起来搞砸了。有人有使用 webpack 在 pug 模板中使用内联 SVG 的经验吗？

• 角色
• 宽度
• 高度
• 笔画线帽

我有一个 gulp 任务，可以构建我所有的哈巴狗模板（包含）：

我也有一个运行这个任务的观察者：

目前，我的内部有 5 个哈巴狗模板src/，每次当哈巴狗将文件写入dist/（通常需要 2-5 秒）时，我的实时重新加载会观察到dist/触发浏览器重新加载，因此我需要观察 5 次浏览器重新加载。

我认为如果同时保存所有文件，则可以防止这种情况发生。如何实现？（或者如果你有更好的解决方案建议他们）。

PS Live Reload 我使用https://github.com/tapio/live-server。

我正在尝试 browserify 并遇到了我的项目结构的问题。我通过 index.js 的路由向 index.jade 发送一个数组。这似乎有效，并且在 index.jade 中显示了数组的长度：

Code.js 是由 browserify 打包的一些类（ES6 是 babelified）。在我尝试使用光谱之前，这似乎有效：

ReferenceError：光谱未定义

browserify 创建 code.js 并在生成代码的末尾包含我的客户端代码：

当我删除光谱参考时，代码有效并显示结果。如何访问此代码部分中 pug 中可用的全局变量？

我错过了什么？

谢谢你，延斯

我们正在尝试设置 GULP 文件以将 PUG 文件提供为 HTML 并将它们放入静态 dist 文件夹。

这是我们的文件： https ://github.com/ShooX512/gulp-testing/

到目前为止，这就是我们控制 PUG 的方式：

但由于 GULP 在 dist 中生成 HTML 文件，我们添加了以下内容：

不幸的是，这不起作用。

我的主要问题是：

应该使用哪个版本的代码以及何时使用？

如何将数据传递给 dist 文件夹中生成的 HTML 文件？（原为PUG）

如果我们使用以下命令，我们是否需要 GULP 来编译 PUG：

我正在尝试使用 pug 循环迭代数组。我使用 webpack，但在需要图像时遇到了一些问题。

如果我需要来自字符串（不是变量）的图像。

它工作正常，但是当我从数组中调用它时

我从 webpack 得到这个错误。

我不知道需求发生了什么。有任何想法吗？谢谢！！