Webpack - How to convert jpg/png to webp via image-webpack-loader

Finally, i've find a proper solution. For future people who will come here :

I no longer use image-webpack-loader but imagemin & imagemin-webp


Setting up :

1) Verify you have imagemin & imagemin-webp installed before do anything.

2) Create a webpack.config.prod.js file to create a specific image conversion script before the webpack build script.

Into the array ['src/images/*.{jpg,png}'] is the input, 'destination' the output. The output is via src to avoid to load unused stuff in the dist directory and it permit to a potential ejs plugin to require directly .webp files by a 'require' command.

const imagemin = require( "imagemin" )
const webp = require( "imagemin-webp" )

imagemin( ['src/images/*.{jpg,png}'], {
    destination: 'src/images',
    plugins: [
        webp( { quality: 60 } )
    ]
} )

3) Create a "prescript" in package.json dedicated to the production

"scripts": {
    "preprod": "node webpack.config.prod.js",
    "prod": "npm webpack"
}

Sources :

Pre & Post Hooks

Imagemin Plugin

Imagemin Webp