wordpress/tools/webpack/development.js

/**
 * External dependencies
 */
const { join } = require( 'path' );

/**
 * WordPress dependencies
 */
const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );

const baseDir = join( __dirname, '../../' );

module.exports = function( env = { environment: 'production', buildTarget: false } ) {
	const mode = env.environment;
	const suffix = mode === 'production' ? '.min' : '';
	let buildTarget = env.buildTarget ? env.buildTarget : ( mode === 'production' ? 'build' : 'src' );
	buildTarget = buildTarget  + '/wp-includes';

	const sharedConfig = {
		mode: 'development',
		target: 'browserslist',
		output: {
			filename: `[name]${ suffix }.js`,
			path: join( baseDir, `${ buildTarget }/js/dist/development` ),
		},
	};

	// See https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#externalising-react.
	return [
		{
			...sharedConfig,
			name: 'react-refresh-entry',
			entry: {
				'react-refresh-entry':
				'@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js',
			},
			plugins: [ new DependencyExtractionWebpackPlugin( {
				outputFilename: `../../../assets/script-loader-[name]${ suffix }.php`,
			} ) ],
		},
		{
			...sharedConfig,
			name: 'react-refresh-runtime',
			entry: {
				'react-refresh-runtime': {
					import: 'react-refresh/runtime.js',
					library: {
						name: 'ReactRefreshRuntime',
						type: 'window',
					},
				},
			},
			plugins: [
				new DependencyExtractionWebpackPlugin( {
					useDefaults: false,
					outputFilename: `../../../assets/script-loader-[name]${ suffix }.php`
				} ),
			],
		},
	];
};