Webpack/html-loader <a> 标签 href 解析答案

【问题标题】：Webpack/html-loader <a> tag href resolveWebpack/html-loader <a> 标签 href 解析
【发布时间】：2020-05-09 08:55:40
【问题描述】：

我已经在我的 webpack 配置文件中设置了别名。它适用于 JS、CSS 导入和 img src 属性。但是我想在 HTML 文件中使用标准灯箱设置构建一个画廊：

<a href="~Images/foo.jpg" data-lightbox="gallery1"><img src="~Images/foo_thumb.jpg"></a>

问题在于，虽然img src 被html-loader 解析，但a href 不是。是否有任何设置或附加插件可以解析a href 值？

【问题讨论】：

标签： webpack webpack-plugin webpack-html-loader

【解决方案1】：

似乎将a href 添加到html-loader 插件的支持属性列表中就足够了。所以在 webpack 配置中：

{
  test: /\.html$/,
  loader: 'html-loader',
  options: {
    attributes: {
      // ...
      {
        tag: 'a',
        attribute: 'href',
        type: 'src'
      }
    }
  }
}

【讨论】：

【解决方案2】：

对于 webpack 5，在选项中添加链接标签的源代码，如下所示

附言列表 arr 中的 '...' 是扩展默认值 supported tags and attributes 所必需的@

{
  test: /\.html$/i,
  include: path.join(__dirname, 'src/views'),
  use: {
    loader: 'html-loader',
    options: {
      esModule: false,
      sources: {
        list: [
          '...',
          {
            tag: 'a',
            attribute: 'href',
            type: 'src'
          }
        ]
      }
    }
  }
}

【讨论】：