在Vue CLI 3中从原始图像创建Webp图像（作为替代版本）

我在最新的Vue CLI 3上有一个简单的Vue项目（我都是新手）。在src中，我有100％质量的jpg / png图像。默认情况下，cli生成时cli将使dist目录中我的图像添加哈希（从image.jpg到image.7a97ca45.jpg），但不进行任何压缩。

因此，我添加了imagemin-webpack-plugin和imagemin-mozjpeg和imagemin-pngquant以获得优化。而且有效。现在在dist中，我有较小的jgp和png。

const ImageminPlugin = require('imagemin-webpack-plugin').default
const ImageminMozjpeg = require('imagemin-mozjpeg')
const ImageminPngquant = require('imagemin-pngquant')

module.exports = {
  configureWebpack: {
    plugins: [
      new ImageminPlugin({
        plugins: [
          ImageminMozjpeg({
            quality: 70
          }),
          ImageminPngquant({
            quality: '80-90'
          })
        ]
      })
    ]
  }
}

但是现在我也想从原始jpg的文件中创建.webp图像。因此，我应该同时获取image.7a97ca45.jpg和image.7a97ca45.jpg.webp（或image.7a97ca45.webp），这样我才能检测到浏览器并提供正确的格式。

但是我不明白如何在vue.config.js中强制webpack创建这些文件。我尝试了例如imagemin-webp-webpack-plugin，但是没有任何作用（“ imagemin-webp-webpack-plugin：0 MB已保存-在控制台中”）。我也尝试将imagemin-webp添加到imageminplugin配置中，但这也不起作用，因为我的源中没有原始的webp，只想转换一个新的。

我能找到的关于webp的所有主题都是针对普通的webpack或较旧的vue-cli，而我实现的最佳目标是通过优化复制整个图像目录，或者从已经压缩的jpg（不是原始图像）中创建webp图像。但是我想保留所有哈希等普通加载器。什么是最好的方法呢？