webpack打包处理img中的srcset属性

2021年09月17日Web前端0

使用html-loader插件，解析html中的图片链接时，只能处理img标签src属性上的地址。但对于srcset上的资源就无能为力了。

解决方法

可以使用html-srcsets-loader插件来配合html-webpack-plugin使用。

在loader配置中，修改配置

{
  test: /\.html$/i,
  use: [{
    loader: 'html-srcsets-loader',
    options: {
      attrs: ['img:src', ':srcset'],
      minimize: true,
      removeComments: true
    }
  }]
}

如此一来，处理img标签上的src属性的同时，也能处理srcset上的图片地址了。

webpack

目录