如何在 webpack 中使用锚标记？

问题描述

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

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

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

解决方法

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

来自我今天创建的配置文件，它与锚点 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，这工作正常对我来说。