问题标签 [webpack-html-loader]

我用谷歌搜索了很多，但我没有找到一个明确的解决方案来解决我的问题。

我的 xxx.sass 和 index.html 都会从 images 文件夹中引用相同的 xxx.png。但是 webpack 解析到了错误的相对路径。我用

• webpack ^4.41.2,
• 用于 xxx.png 的文件加载器 ^4.2.0
• mini-css-extract-plugin ^0.8.0 for xxx.css
• html-loader ^0.5.5 用于 index.html

源代码：

xxx.sass

索引.html

我的文件夹结构是这样的：

如您所见，index.html 和 xxx.sass 中 xxx.png 的相对路径应该不同。但是在我运行 webpack 之后，index.html 和 xxx.css 与 xxx.png 的相对路径相同，例如：

索引.html

xxx.css

我的 webpack.config.js：

我得到了几个 SVG，它们的结构都是这样的：

我正在通过html-loader

我正在尝试访问所有子笔记cabin以更改项目style的。rect我该怎么做？我之前在一个html简单的文件中尝试过这个javascript

但我不知道如何在vue. 我读过一些文章（例如VueJS — 提示和最佳实践），其中说你应该避免直接操作 DOM，所以我想肯定还有别的东西。

有人对此有解决方案吗？先感谢您！

我计划将 Webpack 用于一个项目，并且我正在使用 Html-loader + file-loader 设置我的工作流程，以获取带有动态 src 的生产 html 文件，正如 Colt Steele 在此视频中所教的那样。这是我的 src/ 文件：

索引.html

index.js：

和 main.css

这些是我的配置文件（我有一个用于开发和生产的个人以及两者的共同点）：

webpack.common.js：

webpack.dev.js：

和 webpack.prod.js：

但是，当我运行 npm run build 时，它会执行以下命令：

我得到了带有 assets/img/[name].[hash].[ext] 的预期 dist 文件夹，但是在我的 index.html 中我没有得到预期的 src 标签：

我一直在尝试解决这个问题一段时间，但我似乎无法在任何地方得到正确的答案，到目前为止我尝试过的任何方法都没有奏效。如果遇到此问题的任何人都可以解决他们如何解决它，或者如果有人知道问题可能是什么以及我能做什么，我将不胜感激。提前致谢！

我正在制作一个具有多个入口点的网站。具有以下结构。

• 索引.html
• 产品
  • 索引.html
  • 产品1
    • 索引.html

我正在使用文件加载器将图像加载到 js 文件中。这是我的 webpack 配置：

所有资产都内置dist/assets，我通过在 js 中导入它们来访问它们。给定图像的 index.html 中的结果 url 是assets/[image-hash]

问题是任何子文件夹中的 html 都能找到任何东西，因为它正在查看它们的子文件夹级别。他们工作的 url 应该是更深层次的../assets/[image-hash]。../../assets/[image-hash]

如何修改生成的 URL 以始终查看根文件夹或在我拥有的每个子文件夹中构建所需的图像？

我还尝试使用 html-loader （我认为这是一个更好的解决方案）来避免通过 js 设置图像 src 但遇到了同样的问题。

我正在从头开始使用 webpack4 做一个项目。但是当我尝试在 HTML 文件中显示图像时，我遇到了一个奇怪的问题：在 之后npm run build，图像标签的 src 被构建为<image src="[object Module]". HTML部分是：

<img src="images/main_background.jpg">

是这样的webpack.config.js：

以及这两个加载器的版本：

我无法弄清楚问题是什么...

我正在尝试使用 Webpack 设置一个现代的香草网络启动器。

webpack-html-loader添加and时我卡住了html-loader。这就是发生的事情......

1. 当我使用条目文件中的img标签时，具有这样的属性 ( )，文件夹中的属性被替换为. 但是当我删除( to )之前的点时，文件夹中的输出与. 这不引用我想要包含的图像。index.htmlsrc./imgs/image.pngsrcdist[object Module]uri./imgs/image.png/imgs/image.pngsrcdistsrc
2. 由于srcwebpack 输出的值与源完全相同，所以我尽量粗略地使用uri输出文件夹中的图像，如下所示/dist/img/image.png。这行得通，但这不是一个很好的体验。我很想uri在文件夹中使用我的图像，并在构建时src让 webpack 替换它。dist这可能吗？

这是我的文件结构之后的样子npm run build

这是我的webpack.config.js

我在这里做了一个回购

非常感谢您的时间

更新(02-01-2020)

评论中有人指出了问题的解决方案。（当我在 webpack 中使用 file-loader 和 html-loader 时。图像的 src 属性会像 '[object Module]'）

解决方案是像这样在规则中设置esModules对象falsefile-loader

我的 webpack.config.js 中有两个条目。一个用于 JS，一个用于 SCSS。我可以在开发和产品模式下运行。如果我创建一个生产版本，我会得到以下文件：index.html、main[hash].js、main[hash].css。在 index.html 中，我有指向src文件的链接和脚本标记。如何base.twig在部署应用程序时加载的文件中加载这些链接和脚本标签？在开发中，它从文件中加载，main.js并且base.twig在该文件中包含所有内容。

基地.twig

文件夹结构：

索引.html

webpack.config.js

更新结构：

我正在将一个使用 grunt 的项目转移到 webpack。

我经常使用 HTML 片段在各种文件中重用 HTML 组件。

对于不需要传递变量的 HTML 包含，我使用的是 webpack html-loader。

对于那些我正在使用 mustache 和 html-loader 的人。

这在顶层运行良好，但不是递归的，因此包含另一个片段的片段只显示包含代码，而不是插入的 HTML。

最简单的演示方法是创建一个简单的 repo 来演示问题： https ://github.com/JamieMcDonnell/webpack-html-loader

我的 HTML 模板是：

前 2 个包含导入没有问题。

第三个，recursive.html，看起来像：

sub/sub.html 和 sub/variable.html 超级简单，应该可以工作。我想我缺少一个属性或其他东西来启用递归加载或其他东西，但我找不到它。

请检查 /dist/ 文件夹以获取结果。谁能看到我在这里做错了什么？

非常感谢您的时间和帮助；）

我正在尝试使用DefinePluginwith html-loader。我正在使用插值html-loader，并尝试使用DefinePlugin插值表达式中的值。

这在我加载到时有效HtmlWebpackPlugin，或者当html-loader是用于 html 文件的唯一加载程序时，但如果我从加载html-loader到extract-loader，在尝试处理文件数据DefinePlugin之前似乎没有进行替换。extract-loader

例子：

这按预期工作，并且在观察输出时main.js，HTML 的插值部分已替换为 的My page title值TITLE。

当然，我想使用extract-loader和将此 HTML 提取到单独的文件中file-loader。一次采取这一步，我首先添加extract-loader以处理来自 的输出html-loader，如下所示：

这会导致构建失败：

我的期望是，由于文件是由加载程序按顺序处理的，TITLE应该已经被替换extractLoader.js为准备触摸它的时间了。我在这里想念什么？

我正在使用带有 html-loader 的 webpack 在我的 dist 文件夹中创建一个 assets 文件夹。但我试图通过使用 data-src 链接更改 src 属性来实现图像的延迟加载。

我在文档中发现您可以指定其他属性，这就是我所做的。

当我运行 webpack 时，我的图像不是在 dist 文件夹中创建的。

我在这里和这里发现了其他问题，但找不到一个好的答案。