Add WebP support and update dependencies

.github/workflows/node.js.yml

@@ -20,10 +20,14 @@ jobs:
 
     steps:
     - uses: actions/checkout@v4
+    - name: Enable Corepack
+      # Must run before setup-node's yarn cache: resolves Yarn from packageManager, not v1.
+      # See: https://github.com/actions/setup-node/issues/1027
+      run: corepack enable
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: yarn set version berry
+        cache: yarn
     - run: yarn
     - run: yarn build

config/plugins.js

@@ -1,4 +1,6 @@
 const path = require('path')
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin')
+const svgoconfig = require('./svgo.config')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin')
 const ESLintPlugin = require('eslint-webpack-plugin')
@@ -47,14 +49,29 @@ 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
 			}),
 		]
 
 		if (mode === 'production') {
+			plugins.push(
+				new ImageMinimizerPlugin({
+					minimizer: {
+						implementation: ImageMinimizerPlugin.imageminMinify,
+						options: {
+							plugins: [
+								['gifsicle', { interlaced: true }],
+								['jpegtran', { progressive: true }],
+								['optipng', { optimizationLevel: 5 }],
+								['svgo', { svgoconfig }],
+							],
+						},
+					},
+				})
+			)
 			plugins.push(
 				new BundleAnalyzerPlugin({
 					analyzerMode: 'json',

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

@@ -1,8 +1,6 @@
 const path = require('path')
 const entries = require('./entries')
-const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
-const svgoconfig = require('./svgo.config')
 
 module.exports = {
 	entry: entries,
@@ -14,22 +12,6 @@ module.exports = {
 	},
 	optimization: {
 		minimizer: [
-			new ImageMinimizerPlugin({
-				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 }],
-						],
-					},
-				},
-			}),
 			new TerserPlugin({
 				parallel: true,
 				terserOptions: {

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]-min.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;

yarn.lock

@@ -2678,9 +2678,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001688, caniuse-lite@npm:^1.0.30001702":
-  version: 1.0.30001712
-  resolution: "caniuse-lite@npm:1.0.30001712"
-  checksum: 10/1831ac3260b9657c5a0236d21c02bea6a6b88fd67a451a0ff166d27da17c95ab398c5721e08aeb24f766bced1d38f562f07c8de84e91a10a065808e83835e89e
+  version: 1.0.30001790
+  resolution: "caniuse-lite@npm:1.0.30001790"
+  checksum: 10/2625ba0b9c2648d14b4b02daf2fe7013d4efe087a45b034f40849c97077d435dbc610b47a34d3d6360cd62b7972864ae16978955205b7b8f7397303ba793e0ed
   languageName: node
   linkType: hard