webpack如何处理html中的图片？

Question

因为在js里处理图片预加载，所以HTML里的图片用的是data-src而不是src。我发现url-loader没有处理这些图片，然后用了html-loader也没有处理。

  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 5120,
      name: assetsPath('images/[name].[hash:7].[ext]')
    }
  },
  {
    test: /\.(htm|html)$/i,
    loader: 'html-loader?attrs=img:src img:data-src'
  }

Answer 1

图片的路径写成data-src=require('xxx.jpg')