Webpack: how to automatically transform img -> picture?

Question

webpack

The project uses vue-cli. I'm trying to automate the work with pictures according to best practice

There is an example of code from Google in the eleventy-high-performance-blog

repository The task is to replace the img tag with picture at the compilation stage of the vue template, converting the picture to webp & avif, and reducing the size for mobile phones.

Is it possible to do this using webpack, you may have to write your own plugin? How to automate work with pictures according to current best practice?

Answer 1

Here's what I found on converting pictures.
https://stackoverflow.com/questions/58827843/webpa...
But you need to manually replace the tag, for example, in WebStorm you can use Ctrl + Shift + R (replacement in all files along the way)