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

Question

I want to generate webp files from jpg/png from webpack. To do that i using image-webpack-plugin (https://github.com/tcoopman/image-webpack-loader)

In the plugin documentation it's written that the webp additional optimizer "Compress JPG & PNG images into WEBP" (https://github.com/tcoopman/image-webpack-loader#usage) but after followed the documentation steps the conversion not work.

The files are exported in jpg but nothing is converted.

I've already followed these posts but i've don't understand how to translate in a "non-react" environment :

1. Webpack imagemin plugin to compress jpg, png and create webp?

2. Webpack (Encore): convert images to webp using image-webpack-loader

webpack.config.js

 { 
   test:/\.(gif|png|jpe?g|svg)$/i,
   use:[ 
      { 
         loader:'file-loader',
         options:{ 
            outputPath:'images',
            name:'[name].[ext]'
         }
      },
      { 
         loader:'image-webpack-loader',
         options:{ 
            mozjpeg:{ 
               progressive:true,
               quality:65
            },
            optipng:{ enabled: false },
            pngquant:{ quality: [ 0.65, 0.90 ], speed:4 },
            gifsicle:{ interlaced: false },
            webp:{ quality: 75 }
         }
      }
   ]
}

Is there a reliable and clean way to turn jpg / png files into webp via webpack ?

Answer 1

Finally, i've found 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