Add WebP support and update dependencies

config/plugins.js

@@ -47,9 +47,9 @@ module.exports = {
 				outputImageLocations: 'image-locations.json', // Output locations file name
 				outputImageSizes: 'image-sizes.json', // Output sizes file name
 				generateDefaultImages: true, // Generate default images
-				defaultImageSource: 'src/img/static/default.jpg', // Source image for generation
+				defaultImageSource: 'src/img/static/default.webp', // Source image for generation
 				defaultImagesOutputDir: 'dist/images', // Default images output directory
-				defaultImageFormat: 'jpg', // Generated image format (jpg, png, webp, avif)
+				defaultImageFormat: 'webp', // Generated image format (jpg, png, webp, avif)
 				silence: true, // Suppress console output
 			}),
 			new MiniCssExtractPlugin({

config/svgo.config.js

@@ -1,38 +1,17 @@
 module.exports = {
 	plugins: [
-		{ cleanupAttrs: true },
-		{ removeDoctype: true },
-		{ removeXMLProcInst: true },
-		{ removeComments: true },
-		{ removeMetadata: true },
-		{ removeTitle: true },
-		{ removeDesc: true },
-		{ removeUselessDefs: true },
-		{ removeEditorsNSData: true },
-		{ removeEmptyAttrs: true },
-		{ removeHiddenElems: true },
-		{ removeEmptyText: true },
-		{ removeEmptyContainers: true },
-		{ cleanupEnableBackground: true },
-		{ convertStyleToAttrs: true },
-		{ convertColors: true },
-		{ convertPathData: true },
-		{ convertTransform: true },
-		{ removeUnknownsAndDefaults: true },
-		{ removeNonInheritableGroupAttrs: true },
-		{ removeUselessStrokeAndFill: true },
-		{ removeUnusedNS: true },
-		{ cleanupIDs: true },
-		{ cleanupNumericValues: true },
-		{ moveElemsAttrsToGroup: true },
-		{ moveGroupAttrsToElems: true },
-		{ collapseGroups: true },
-		{ removeRasterImages: false },
-		{ mergePaths: true },
-		{ convertShapeToPath: true },
-		{ sortAttrs: true },
-		{ removeDimensions: false },
-		{ prefixIds: true },
-		{ removeViewBox: false },
+		{
+			name: 'preset-default',
+			params: {
+				overrides: {
+					// Disable a plugin included by default that you don't want (false)
+					removeViewBox: false,
+				},
+			},
+		},
+		// Plugins that are not in the "preset-default" and that you want to activate
+		'removeTitle',
+		'convertStyleToAttrs',
+		'prefixIds',
 	],
 }

config/webpack-image-sizes-plugin.js

@@ -41,9 +41,9 @@ class WebpackImageSizesPlugin {
 			outputImageLocations: 'image-locations.json',
 			outputImageSizes: 'image-sizes.json',
 			generateDefaultImages: false,
-			defaultImageSource: 'src/img/static/default.jpg',
+			defaultImageSource: 'src/img/static/default.webp',
 			defaultImagesOutputDir: 'dist/images',
-			defaultImageFormat: 'jpg',
+			defaultImageFormat: 'webp',
 			silence: false,
 			...options,
 		}
@@ -543,8 +543,7 @@ class WebpackImageSizesPlugin {
 
 		this.log(
 			'log',
-			`🖼️  Processing ${sizeKeys.length} default images (${format.toUpperCase()}) from ${
-				this.options.defaultImageSource
+			`🖼️  Processing ${sizeKeys.length} default images (${format.toUpperCase()}) from ${this.options.defaultImageSource
 			}`
 		)
 

config/webpack.common.js

@@ -18,14 +18,11 @@ module.exports = {
 				minimizer: {
 					implementation: ImageMinimizerPlugin.imageminMinify,
 					options: {
-						// Lossless optimization with custom option
-						// Feel free to experiment with options for better result for you
 						plugins: [
 							['gifsicle', { interlaced: true }],
 							['jpegtran', { progressive: true }],
 							['optipng', { optimizationLevel: 5 }],
-							// Svgo configuration here https://github.com/svg/svgo#configuratio
-							['svgo', { svgoconfig }],
+							['svgo', svgoconfig],
 						],
 					},
 				},

config/webpack.dev.js

@@ -6,7 +6,7 @@ const loaders = require('./loaders')
 const mode = 'development'
 
 module.exports = merge(common, {
-	mode: mode,
+	mode,
 	stats: 'errors-only',
 	devtool: 'inline-source-map',
 	devServer: {

config/webpack.prod.js

@@ -5,7 +5,7 @@ const loaders = require('./loaders')
 const mode = 'production'
 
 module.exports = merge(common, {
-	mode: mode,
+	mode,
 	stats: 'minimal',
 	output: {
 		filename: '[name].js',

src/scss/login.scss

@@ -1,7 +1,7 @@
 // SCSS variables to customise the login page styles
 // The CSS file generated in dist/ by webpack is called automatically thanks to the WP Login Page mu-plugin present in the WP Skeleton.
 
-$login-logo-path: "../../src/img/static/logo.jpg";
+$login-logo-path: "../../src/img/static/logo.webp";
 $login-logo-size: 312px 43px;
 $login-logo-height: 60px;
 $login-body-bg-color: #666;
@@ -16,6 +16,7 @@ $login-btn-hover-bg-color: #222;
 
 html,
 body {
+
 	&::before,
 	&::after {
 		display: none;