search

ai / webp-in-css

PostCSS plugin and tiny JS script (131 bytes) to use WebP in CSS background
MIT License
345 stars 27 forks source link

Generate webp on the fly #29

Open lucalbert opened 3 years ago

lucalbert commented 3 years ago

Hello,

Is there no way to generate the webp images on the fly instead of having to generate them first?

I'm using WebPack with postcss-loader (through webpack-encore) and I have the ImageminWebpWebpackPlugin plugin which already converts JPE?G/PNG to webp on the fly.

Thanks

ai commented 3 years ago

There are many ways, but I do not have any particular recommendation for all cases. For instance, you can create a pre-commit hook or run a script before calling PostCSS.

lucalbert commented 3 years ago

Hi @ai,

Ok, thanks, I'll take a look at this.

On the other hand, it may be a misunderstanding of the postCSS workflow with Webpack, but if I understand correctly, PostCSS performs its processing after Webpack has done its work (therefore on the files that are in the build directory)?

So why do the webp images have to be in the source directory? Can't it work directly with webp images in the build directory?

Many thanks.

ai commented 3 years ago

If I understand correctly, PostCSS performs its processing after Webpack has done its work (therefore on the files that are in the build directory)

Nope. PostCSS works inside webpack processing via postcss-loader.

So why do the webp images have to be in the source directory?

Maybe image loader works after postcss-loader