Example webpack config override when using --experimental-modules flag with wp-scripts

webpack.config.js

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const { merge } = require( 'webpack-merge' );

// get default configs
const [ scriptConfig, moduleConfig ] = defaultConfig;

/**
 * Override script config
 * the script config is the default config, which is used with or without the --experimental-modules flag
 */
const scriptConfigOverride = {
	// your configuration here
};

/**
 * Override modules config
 * the module config is used for all scripts that are loaded via "viewScriptModule" in the block.json
 */
const moduleConfigOverride = {
	// your configuration here
};

module.exports = [
	merge( scriptConfig, scriptConfigOverride ),
	merge( moduleConfig, moduleConfigOverride ),
];

Explanation:

1. To use the new Interactivity API you have to load the view script via the block.json with the viewScriptModule property so it loads as an module (https://make.wordpress.org/core/2024/03/04/script-modules-in-6-5/).
2. Also if you use WP Scripts you have to use the --experimental-modules flag
3. If you want to override the default webpack config with your own, you have to handle the config different than if you work without the experimental flag cause defaultConfig gives you an array with two objects inside and not an object.
   https://github.com/WordPress/gutenberg/blob/3a38dd82e9abff09747e1db0ae989b9d1cc67c84/packages/scripts/config/webpack.config.js#L469