Question

我已经在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值？

Answer 1

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

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

Answer 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'
          }
        ]
      }
    }
  }
}

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

2 个答案: