问题标签 [webpack-html-loader]

当我使用 html-loader 和文件加载器时，在开发模式下，图像不会显示在 src->assets->images 文件夹和 html 文件中的浏览器图像上

请建议我如何在开发和产品模式下运行代码

这是我第一次使用 Webpack，我遇到了问题。

我收到错误消息 ERROR in Error: Child compiler failed: Module parse failed: Unexpected character '�' (1:0)

当我以这种方式放置图像标签 src 时。我在第一个“/”之前添加了一个句点，因为我在我的根文件夹中，并且想将一个文件夹添加到资产中。所以，我希望它看起来像这样： img src="./assets/images/mockup.png" alt=" 但这无法构建到生产和开发模式

如果我不添加这样的句点，它可以在开发模式下工作。img src="/assets/images/mockup.png" alt=""，但这不是我想要的最终构建。它使最终构建失败，因为如果我不将句点放在首位，它就找不到我的资产。

这是我的文件树：

这是我的 webpack 配置。

webpack.config.js

我在我的 webpack 配置文件中犯了错误吗？为什么我会收到错误：'错误中的错误：子编译失败：模块解析失败：意外字符'�'（1：0）'

如果我添加“./”，则处于开发模式和生产模式。有任何想法吗？没有“。” 它在我的文件树中找不到文件吗？

我最近才遇到这个问题，但我无法弄清楚我的 webpack 设置有什么问题。

每次我保存我的 SCSS 文件 (./src/scss/) 更改时，webpack 都会刷新页面（我猜这是热模块重新加载），但在刷新之后，我的图像（应该从 html<img>标签加载）只是消失并返回 404 错误。

这仅在我保存src/ 文件夹中的文件时发生，并且如果我在保存 src/ 文件更改后立即保存我的 html（不在 ./src/ 文件夹中），图像就会重新出现！

关于如何解决这个问题的任何想法？（我正在使用 webpack 5）

我已经尝试了我在互联网上找到的所有东西，比如 target:'web' 或 hot module reload setting blahblah ...但没有任何效果。

我的文件夹结构：

这是我的webpack.config.js下面：

我的package.json：

index.html

我最近升级到 Webpack 5，我的 html-loader 不再加载 svg 文件并内联它们。

这是我在 webpack 中的 svg 规则

无论我如何尝试导入它，它似乎只是创建一个文件而不给我一串 HTML。

它过去没有给我几个构建文件，而是将它们内联在我的 JS 中。

帮助将不胜感激。

在我的 webpack 配置中，我有 3 个 html 文件，包括页眉、主模板、页脚。我想按顺序将它们组合在一起并设置一个输出文件。但不幸的是找不到任何解决方案，如果你能帮助我，我会很高兴。

Webpack 文档module.rules非常稀少：

[Rule]

创建模块时与请求匹配的规则数组。这些规则可以修改模块的创建方式。他们可以将加载器应用于模块，或修改解析器。

在html-loader文档中，存在许多示例，其中两个规则测试相同的正则表达式，例如：

处理同一文件的两条规则的原因/结果是什么？

为什么不使用单一规则？