Vue-cli 3 - Webpack 4: невозможно загрузить изображения в формате .webp с помощью image-webpack-loader

Я пытаюсь загрузить изображения в компоненты Vue с расширением .webp

<v-parallax :src="require('@/assets/images/hero.webp')">

Я добавил модуль image-webpack-loader

 yarn add image-webpack-loader --dev

vue.config.js

    const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(gif|png|jpe?g|svg)$/i,
          use: [
             'file-loader',
            {
              loader: 'image-webpack-loader',
              options: {
                webp: {
                  quality: 80
                }
              }
            }
          ]
        }
      ]
    }
  }
}

но я получаю ошибку при оптимизации активов во время компиляции

94% asset optimization

 ERROR  Failed to compile with 1 errors                                                                                                       18:57:32

 error  in ./src/assets/images/hero.webp

Module parse failed: Unexpected character '�' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

 @ ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-16f8e3e2","hasScoped":true,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/
vue-loader/lib/selector.js?type=template&index=0!./src/components/Home/Heading.vue 11:24-60
 @ ./src/components/Home/Heading.vue
 @ ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"/Users/yves/Developments/myprojects/node_modules/.cac
he/cache-loader"}!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/Home.vue
 @ ./src/views/Home.vue
 @ ./src/router.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js

что не так с настройками моего веб-пакета?