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