Integrate React Fast Refresh with React

src/wp-includes/script-loader.php

@@ -214,6 +214,39 @@ function wp_get_script_polyfill( $scripts, $tests ) {
 	return $polyfill;
 }
 
+/**
+ * Registers development scripts that integrate with `@wordpress/scripts`.
+ *
+ * @see https://github.com/WordPress/gutenberg/tree/trunk/packages/scripts#start
+ *
+ * @since 6.0.0
+ *
+ * @param WP_Scripts $scripts WP_Scripts object.
+ */
+function wp_register_development_scripts( $scripts ) {
+	if ( ! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG ) {
+		return;
+	}
+
+	$development_scripts = array(
+		'react-refresh-entry',
+		'react-refresh-runtime',
+	);
+
+	foreach ( $development_scripts as $script_name ) {
+		$assets = include ABSPATH . WPINC . "/js/dist/development/$script_name.php";
+		$scripts->add(
+			'wp-' . $script_name,
+			"/wp-includes/js/dist/development/$script_name.js",
+			$assets['dependencies'],
+			$assets['version']
+		);
+	}
+
+	// See https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#externalising-react.
+	$scripts->query( 'react' )->deps[] = 'wp-react-refresh-entry';
+}
+
 /**
  * Registers all the WordPress packages scripts that are in the standardized
  * `js/dist/` location.
@@ -560,6 +593,7 @@ function wp_tinymce_inline_scripts() {
  */
 function wp_default_packages( $scripts ) {
 	wp_default_packages_vendor( $scripts );
+	wp_register_development_scripts( $scripts );
 	wp_register_tinymce_scripts( $scripts );
 	wp_default_packages_scripts( $scripts );
 

tools/webpack/development.js

@@ -20,8 +20,8 @@ module.exports = function( env = { environment: 'production', buildTarget: false
 		mode: 'development',
 		target: 'browserslist',
 		output: {
-			filename: `[name]/index${ suffix }.js`,
-			path: join( baseDir, `${ buildTarget }/js/dist` ),
+			filename: `[name]${ suffix }.js`,
+			path: join( baseDir, `${ buildTarget }/js/dist/development` ),
 		},
 	};