ParcelJS plugin to bundle resources defined in data-* attributes
npm install parcel-plugin-data-srcParcelJS plugin to bundle resources defined in data-src and data-srcset
attributes.
This is particularly useful when doing lazyloading of images, which doesn't
directly place the image path in the src attribute.
``bash`
$ npm install --save-dev parcel-plugin-data-src
`html`
./images/image-lg.webp 1000w,
./images/image-md.webp 500w,
./images/image-sm.webp 250w"
sizes="100vw"
type="image/webp"
>
data-srcset="
./images/image-lg.jpg 1000w,
./images/image-md.jpg 500w,
./images/image-sm.jpg 250w"
sizes="100vw"
data-src="./images/image-lg.jpg"
src="./images/image-placeholder.jpg"
>
By default, Parcel will only bundle ./images/image-placeholder.jpg since it'ssrc
defined in the attribute.
Using this plugin, the following resosurces that are defined in data-srcsetdata-src
and will also be bundled.
- ./images/image-lg.webp./images/image-md.webp
- ./images/image-sm.webp
- ./images/image-lg.jpg
- ./images/image-md.jpg
- ./images/image-sm.jpg`
-
MIT License