fix (webpack): configures CleanWebpackPlugin

Configures CleanWebpackPlugin to preserve the images directory and its contents during the cleaning process. This prevents the deletion of images when cleaning the dist folder.

Author: firestar300

config/plugins.js

@@ -12,63 +12,65 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
 const WebpackImageSizesPlugin = require('./webpack-image-sizes-plugin')
 
 module.exports = {
-  get: function (mode) {
-    const plugins = [
-      new CleanWebpackPlugin(),
-      new ESLintPlugin({
-        overrideConfigFile: path.resolve(__dirname, '../.eslintrc'),
-        context: path.resolve(__dirname, '../src/js'),
-        files: '**/*.js',
-      }),
-      new SpriteLoaderPlugin({
-        plainSprite: true,
-      }),
-      new StyleLintPlugin({
-        configFile: path.resolve(__dirname, '../.stylelintrc'),
-        context: path.resolve(__dirname, '../src/scss'),
-        files: '**/*.scss',
-      }),
-      new WebpackBar({
-        color: '#ffe600',
-      }),
-      new DependencyExtractionWebpackPlugin(),
-      new WebpackImageSizesPlugin({
-        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)
-        silence: true, // Suppress console output
-      }),
-    ]
+	get: function (mode) {
+		const plugins = [
+			new CleanWebpackPlugin({
+				cleanOnceBeforeBuildPatterns: ['**/*', '!images', '!images/**'],
+			}),
+			new ESLintPlugin({
+				overrideConfigFile: path.resolve(__dirname, '../.eslintrc'),
+				context: path.resolve(__dirname, '../src/js'),
+				files: '**/*.js',
+			}),
+			new SpriteLoaderPlugin({
+				plainSprite: true,
+			}),
+			new StyleLintPlugin({
+				configFile: path.resolve(__dirname, '../.stylelintrc'),
+				context: path.resolve(__dirname, '../src/scss'),
+				files: '**/*.scss',
+			}),
+			new WebpackBar({
+				color: '#ffe600',
+			}),
+			new DependencyExtractionWebpackPlugin(),
+			new WebpackImageSizesPlugin({
+				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)
+				silence: true, // Suppress console output
+			}),
+		]
 
-    if (mode === 'production') {
-      plugins.push(
-        new BundleAnalyzerPlugin({
-          analyzerMode: 'json',
-          generateStatsFile: true,
-        })
-      )
-      plugins.push(
-        new WebpackManifestPlugin({
-          fileName: 'assets.json',
-        }),
-        new MiniCssExtractPlugin({
-          filename: '[name].[contenthash:8].min.css',
-        })
-      )
-    } else {
-      plugins.push(
-        new MiniCssExtractPlugin({
-          filename: '[name].css',
-        })
-      )
-    }
+		if (mode === 'production') {
+			plugins.push(
+				new BundleAnalyzerPlugin({
+					analyzerMode: 'json',
+					generateStatsFile: true,
+				})
+			)
+			plugins.push(
+				new WebpackManifestPlugin({
+					fileName: 'assets.json',
+				}),
+				new MiniCssExtractPlugin({
+					filename: '[name].[contenthash:8].min.css',
+				})
+			)
+		} else {
+			plugins.push(
+				new MiniCssExtractPlugin({
+					filename: '[name].css',
+				})
+			)
+		}
 
-    return plugins
-  },
+		return plugins
+	},
 }