Help Needed: Preventing Build Process from Deleting Optimized Images in Custom Gutenberg Blocks Plugin

[ZoomREI]

I'm developing a custom Gutenberg blocks plugin and have integrated an image optimization process into my workflow. I'm using sharp in a custom Node.js script to generate optimized WebP versions of images for each block and copying them to the appropriate directories under the build folder. Each block follows a structure like:

build/{block-name}/assets/images

The issue I’m facing is that the build process using wp-scripts removes these optimized images from the build folder. Every time I run the build, Webpack cleans the build directory before rebuilding, which results in all optimized images being deleted.

I've tried several approaches to configure Webpack to exclude these images from being removed, including:

• I attempted to modify the Webpack configuration by adding CleanWebpackPlugin to prevent the removal of the assets/images directories. However, I wasn’t successful in preserving the files.

• I used the @wordpress/scripts setup and added custom configurations by extending Webpack’s behavior. Even with adjustments to exclude certain patterns (!assets/images/**), it seems the configuration is overridden or not respected during the clean step.

Here's my package.json:

{
	"name": "custom-blocks-plugin",
	"version": "0.1.0",
	"description": "A custom Gutenberg blocks plugin with image optimization.",
	"author": "My Name",
	"license": "GPL-2.0-or-later",
	"main": "build/index.js",
	"scripts": {
		"build": "wp-scripts build --webpack-copy-php && npm run build:css && npm run process-images",
		"process-images": "node build-scripts/process-images.js",
		"format": "wp-scripts format",
		"lint:css": "wp-scripts lint-style",
		"lint:js": "wp-scripts lint-js",
		"packages-update": "wp-scripts packages-update",
		"plugin-zip": "wp-scripts plugin-zip",
		"start": "wp-scripts start --webpack-copy-php && npm run watch:css && npm run process-images",
		"watch:css": "postcss src/**/*.css --dir build --watch",
		"build:css": "postcss src/**/*.css --dir build"
	},
	"devDependencies": {
		"@wordpress/scripts": "^27.9.0",
		"autoprefixer": "^10.4.19",
		"cssnano": "^7.0.2",
		"postcss": "^8.4.38",
		"postcss-cli": "^11.0.0",
		"postcss-import": "^16.1.0",
		"postcss-nested": "^6.0.1",
		"sharp": "^0.33.5"
	},
	"dependencies": {
		"gsap": "^3.12.5"
	}
}

And here’s the custom Webpack configuration I’ve tried:

const defaultConfig = require("@wordpress/scripts/config/webpack.config");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
	...defaultConfig,
	plugins: [
		new CleanWebpackPlugin({
			// Trying to exclude the images directories
			cleanOnceBeforeBuildPatterns: ["**/*", "!assets/images/**"],
		}),
		...defaultConfig.plugins,
	],
};

Despite logging the configuration to confirm it's being loaded, the optimized images are still removed during the build process.

• Is there a recommended way to configure the wp-scripts build process to exclude specific directories from being cleaned?

• Or, is there an alternative approach I could take to integrate the image optimization process into the build without it being overwritten?

Any advice or suggestions would be greatly appreciated! 🙏🏼