WP-Scripts webpack watcher issues with custom config

[TeamDNK]

Description

We have a plugin that requires multiple webpack exports in separate nested folders by using an array of objects with unique properties (see example below). The issue we are experiencing has to do with using {{{npm run start}}} from the wp-scripts package. Whenever a change is made and the webpack watcher updates the dist files, the last set of scripts (in this case example c) do not get exported and I end up with an empty dist folder. However, if the edited script resides in example-c, the files are properly exported.

I have spent a few days troubleshooting but have not figured out why this happens. Here are some notes that I have gathered:

• It is always the set in the array (example-c) that fails
• Above is true except when the script that changes belongs to example-c
• If example-a is moved to the last position on the list, example-a will produce issues
• npm run build behaves properly however it will fail in the same fashion rarely
• Adding another item to the list will produce the same results
• Creating a simplified example as a test works properly

Step-by-step reproduction instructions

1. Setup multiple export config objects
2. npm run start

Expected behaviour

Watch files and update them based on changes.

Actual behaviour

Deletes the last batch of scripts even when no changes were made in those files.

Code snippet (optional)

// webpack.config.js

const path = require( 'path' );
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
 
module.exports = [
	{
		...defaultConfig,
		entry: {
			'output1': path.resolve( process.cwd(), 'plugin-name/includes/example-a/src', 'file1.js' ),
			'output2': path.resolve( process.cwd(), 'plugin-name/includes/example-a/src', 'file2.js' ),
			'output3': path.resolve( process.cwd(), 'plugin-name/includes/example-a/src', 'file3.js' ),
			'output4': path.resolve( process.cwd(), 'plugin-name/includes/example-a/src', 'file4.js' ),
			'output5': path.resolve( process.cwd(), 'plugin-name/includes/example-a/src', 'file5.js' ),
		},
		output: {
			filename: '[name].js',
			path: path.resolve( process.cwd(), 'plugin-name/includes/example-a/dist' )
		},
	},
	{
		...defaultConfig,
		entry: {
			'output1': path.resolve( process.cwd(), 'plugin-name/includes/example-b/src', 'file1.js' ),
			'output2': path.resolve( process.cwd(), 'plugin-name/includes/example-b/src', 'file2.js' ),
			'output3': path.resolve( process.cwd(), 'plugin-name/includes/example-b/src', 'file3.js' ),
		},
		output: {
			filename: '[name].js',
			path: path.resolve( process.cwd(), 'plugin-name/includes/example-b/dist' )
		},
	},
	{
		...defaultConfig,
		entry: {
			'output1': path.resolve( process.cwd(), 'plugin-name/includes/example-c/src', 'file1.js' ),
			'output2': path.resolve( process.cwd(), 'plugin-name/includes/example-c/src', 'file2.js' ),
			'output3': path.resolve( process.cwd(), 'plugin-name/includes/example-c/src', 'file3.js' ),
			'output4': path.resolve( process.cwd(), 'plugin-name/includes/example-c/src', 'file4.js' ),
		},
		output: {
			filename: '[name].js',
			path: path.resolve( process.cwd(), 'plugin-name/includes/example-c/dist' )
		},
	},
]

WordPress information

• WordPress version: 5.6
• Gutenberg version: Core
• @wordpress/scripts: 12.6.1

Device information

• Device: Mac / PC
• Operating system: Big Sur / Win 10
• Browser: Safari / Chrome

[gziolo]

It looks like a very advanced use case with multiple webpack configs and multiple entry points. I'm afraid I can't help as it requires a deep understanding of how webpack works. It's definitely out of the scope of what @wordpress/scripts is able to support out of the box. The only pointer I can give you is this plugin:

gutenberg/packages/scripts/config/webpack.config.js

Lines 204 to 210 in 8035392

	// During rebuilds, all webpack assets that are not used anymore will be
	// removed automatically. There is an exception added in watch mode for
	// fonts and images. It is a known limitations:
	// https://github.com/johnagan/clean-webpack-plugin/issues/159
	new CleanWebpackPlugin( {
	cleanAfterEveryBuildPatterns: [ '!fonts/**', '!images/**' ],
	} ),

It removes stale files during rebuilds. Maybe it doesn't work properly for such a complex setup?