Generate webp on the fly

[lucalbert]

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]

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]

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]

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