Vue-cli 3 - Webpack 4: cannot load images with .webp format using the image-webpack-loader - vue.js

Question

I am trying to load images in Vue components with the extension .webp
<v-parallax :src="require('#/assets/images/hero.webp')">
I added the image-webpack-loader module
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
}
}
}
]
}
]
}
}
}
but I get an error in asset optimization during compilation
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
what's wrong with my webpack settings ?

Answer 1

change test .. to
test: /.(gif|png|jpe?g|webp|svg)$/i,
and here we rae