Webpack html-loader无法解析<a>标签href属性？已配置别名求解决方案

刚好碰到过类似的情况，其实解决起来很简单——只需要给html-loader扩展一下它要解析的属性列表就行！默认情况下html-loader只会处理img标签的src属性，咱们手动把a标签的href加进去，它就能识别并解析你的~Images别名了。

具体配置步骤 #

1. 打开你的webpack配置文件，找到module.rules里对应html-loader的规则（如果还没配置过html-loader，先把这个规则加上）
2. 在options里添加attributes配置项，指定需要解析的标签和属性对，把a:href加进去，同时保留原来的img:src（毕竟你还要用图片缩略图）

给你个现成的配置示例，直接套进去改改路径就行：

module.exports = {
  // ...其他webpack配置项
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: 'html-loader',
        options: {
          attributes: {
            list: [
              // 保留默认的img标签src解析
              {
                tag: 'img',
                attribute: 'src',
                type: 'src',
              },
              // 新增a标签的href解析
              {
                tag: 'a',
                attribute: 'href',
                type: 'src',
              },
            ],
          },
          // 可选：关闭ES模块模式，有些场景下能让别名解析更顺畅
          esModule: false,
        },
      },
      // ...其他loader规则
    ],
  },
  // 别忘了确认你的别名配置是正确的（这里是你原来就有的配置）
  resolve: {
    alias: {
      '~Images': path.resolve(__dirname, 'src/images/'), // 替换成你实际的图片目录
    },
  },
};

额外提醒 #

• 如果你用的是html-loader v1.x之前的老版本，配置方式会有点不一样，得用attrs选项，比如attrs: ['img:src', 'a:href']
• 一定要确保resolve.alias里的~Images确实指向了你的图片目录，不然解析还是会出错
• 配置完重新跑一遍webpack，你的lightbox链接里的~Images/foo.jpg就会被正确解析成实际的资源路径，和img标签的src一样正常生效啦！

内容的提问来源于stack exchange，提问作者csisy