feat (config): update Webpack image sizes plugin

Introduces a new Webpack plugin to automatically generate `image-locations.json` and `image-sizes.json` based on JSON size definitions and TPL templates.

This allows for dynamic image size management and srcset generation, improving image optimization and reducing manual configuration. The plugin supports default image generation and format conversion using Sharp.

Author: firestar300

assets/conf-img/sizes/square-native.json

@@ -0,0 +1,12 @@
+[
+    {
+        "width": 500,
+        "height": 500,
+        "crop": true
+    },
+    {
+        "width": 1000,
+        "height": 1000,
+        "crop": true
+    }
+]

assets/conf-img/tpl/default-native-caption.tpl

@@ -0,0 +1,5 @@
+%%data-location%%
+<figure>
+    <img %%src%% %%srcset%% %%attributes%% />
+    <figcaption>%%caption%%</figcaption>
+</figure>

assets/conf-img/tpl/default-native.tpl

@@ -0,0 +1,2 @@
+%%data-location%%
+<img %%src%% %%srcset%% %%attributes%% />

config/WebpackImageSizesPlugin.js

@@ -9,7 +9,7 @@ const WebpackBar = require('webpackbar')
 const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
-const WebpackImageSizesPlugin = require('./WebpackImageSizesPlugin')
+const WebpackImageSizesPlugin = require('./webpack-image-sizes-plugin')
 
 module.exports = {
   get: function (mode) {
@@ -33,7 +33,15 @@ module.exports = {
       }),
       new DependencyExtractionWebpackPlugin(),
       new WebpackImageSizesPlugin({
-        watch: mode !== 'production',
+        confImgPath: 'assets/conf-img', // Path to the conf-img folder
+        sizesSubdir: 'sizes', // Subdirectory containing the sizes JSON files
+        tplSubdir: 'tpl', // Subdirectory containing TPL templates
+        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
+        defaultImagesOutputDir: 'dist/images', // Default images output directory
+        defaultImageFormat: 'jpg', // Generated image format (jpg, png, webp, avif)
       }),
     ]