Build: Enable React Fast Refresh for block development

Brings the same functionality introduced in the Gutenberg plugin with https://github.com/WordPress/gutenberg/pull/28273. In effect, it brings React Fast Refresh support to WordPress core for block development with `@wordpress/scripts`.

Props walbo, antonvlasenko.
See #51750, #55505.
Follow-up [53135].



git-svn-id: https://develop.svn.wordpress.org/trunk@53140 602fd350-edb4-49c9-b593-d223f7449a82

tools/webpack/development.js

@@ -0,0 +1,61 @@
+/**
+ * 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].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].php'
+				} ),
+			],
+		},
+	];
+};