我可以在Web Pack中使用什么插件来将不同格式的图像抛出<picture>元素捆绑到html中？

Question

我更喜欢使用Google的webp图像格式在我的网站上显示大多数图像，但是由于firefox和safari仍不支持该格式，因此我想使用html 5中的picture元素创建后备广告，看起来像这样：

<picture>
    <source srcset="img/the-image.webp" type="image/webp">
    <!--if the browser do not support webp, it will use the jpg image->
    <source srcset="img/the-image.jpg" type="image/jpeg"> 
    <img src="img/the-image" alt="Alt Text!">
 </picture>

但是我该如何在webpack中自动化呢？
（用上面的代码替换指向图像的img元素）

有可能吗？
是否有任何插件/加载器以及它们的名字？

另外，使用webp图像的其他其他解决方法是什么？
（我的所有图像都是通过CDN传递的，但是我的CDN提供程序不支持取决于Accept标头的不同图像格式，所以...我不能这样做）