webpack html src,javascript - Webpack html-loader, include data-src image for lazy loading - Stack O...

I'm using webpack with html-loader to create an assets folder inside my dist folder.

But I'm trying to implement lazy loading on images by changing src attribute with a data-src link.

I found in the doc that you can specify others attribute, which is what I did.

rules: [

{

test: /\.html$/,

use: {

loader: "html-loader",

options: {

attributes: [':srcset',':data-srcset', 'img:data-src', 'img:src', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src', 'input:src', 'object:data', 'script:src']

}

}

},

{

test: /\.(svg|png|jpg|jpeg|gif)$/, // Ajouter les nouveaux types quand il y en a

use: {

loader: "file-loader",

options: {

name: "[name]-[hash].[ext]",

outputPath: "assets",

esModule: false

}

}

}

]

When I'm running webpack, my image isn't created in the dist folder.

I found others questions here and here about that but couldn't find a good answer.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值