如何在 webpack 中使用锚标签？答案

【问题标题】：How can I work with anchor tags in webpack?如何在 webpack 中使用锚标签？
【发布时间】：2021-05-02 15:36:14
【问题描述】：

我一定遗漏了一些东西，因为似乎几乎没有关于在 webpack 中解析锚标签的文档。例如，如果我想散列链接到我的登录索引页面中的 html 文件的名称。

就像这篇文章说的： Webpack html-loader error processing href in anchor tags。即使我尝试在 html-loader 中扩展支持的标签，它也会导致错误。以下是有关扩展支持标签的文档：https://webpack.js.org/loaders/html-loader/#list.

那么anchor>href标签有什么特别之处呢？

【问题讨论】：

标签： webpack webpack-html-loader

【解决方案1】：

您链接的示例帖子未使用展开 (...) 运算符，如果您只是尝试添加来源而不是定义有限数量，这可能是问题的一部分来源 - 如果您特别遇到其他文件类型未受管理的错误。

根据我今天创建的配置文件，它与锚hrefs 一起使用：

  module: {
    rules: [
      {
        test: /\.(jpg|svg|png|pdf|gif)$/,
        type: "asset/resource",
      },
      {
        test: /\.html$/,
        loader: "html-loader",
        options: {
          sources: {
            list: [
              // All default supported tags and attributes
              "...",
              {
                tag: "a",
                attribute: "href",
                type: "src",
              },
            ],
          },
        },
      },
    ], 
  }

如果列表中没有“...”：上面的数组，webpack 用列出的源替换其源，而不是添加新源到现有列表。

我专门使用此配置从我的 HTML 中的锚标记中获取我的 src/ 文件夹中的 PDF 资产，将其复制到 dist/ 并在最终构建中更新其 href，这对我来说是正确的.

【讨论】：

谢谢，它现在正在抓取锚标签，我不确定我到底错过了什么，也许 webpack 已更新，或者它可能是传播运算符，我不确定。然而，尽管我可以散列文件名，但发出的 HTML 是垃圾，但我将垃圾 javascript 附加到 HTML 的开头。
我确实看到 .pdf 文件可以正常工作。仅供参考，结合 HTML-Webpack-Plugin 来更新路径。