webpack基础 -- 处理html中引入的图片

使用: html-loader
options: {
attrs:[img:src]
}
<\img src=”src/assets/img/demo.png” data-src=”src/assets/img/demo1.png” />’
webpack 配置

rules:[
    {
        test:/\.(png|jpg|jpeg|gif)$/,
        use:[
            {
                loader:'url-loader',
                options:{
                    name:'[name]-[hash:5].[ext]',
                    limit: 1000,
                    outputPath:'assets/imgs/' // html和css中图片的输出路径
                }
            },
            {
                loader:'img-loader',
                options:{
                    quality: 80
                    }
                }
            },
            {
                loader:'html-loader',
                options:{
                    attrs:['img:src','img:data-src']
                }
            }
        ]
    }
]

<\img src=”${require(‘./src/assets/img/demo.png’)}” data-src=”src/assets/img/demo1.png” />’
这样不依赖loader也可以处理引入的图片