关于webpack img标签引入图片的配置

Question

我的需求是 不想通过 require('./images/a.jpg')来在我的代码中使用图片。
我想要的是<img src="./images/a.jpg" />webpack 就能帮我打包该图片。
我觉得是可以的。
不知道谁知道如何配置。
我现在的配置是这样的
the code follows...

{
 test: /\.html$/,
 use: [ {
   loader: 'html-loader',
     options: {
        minimize: false,
        removeComments: true,
     }
   }],
}
{
test: /\.(png|jpg|gif|jpe?g)$/,
use: [
  {
    loader: 'url-loader',
    options: {
       limit: 8192,
       name:'images/[hash].[name].[ext]'
    }
  }
]}

并且我看 html-loader的介绍说 应该是用了这个loader就可以不要require()来引入图片了； 但是不知道为什么不行。

Answer 1

我这个需求貌似是完不成的

Answer 2

1.要在loader里配置

options: {
      attrs: [':data-src']
    }

2.img标签里要有data-src属性
3.要require 包含img标签的html