Build: Add optional web pack live reload plugin

The livereload plugin allows one to automatically reload the page when webpack is done building the files. This functionality can optionally be enabled using `define( 'GUTENBERG_LIVE_RELOAD', true );`. The URL to the livereload server can be customized by setting this constant to a string.

The port that the livereload server starts on when starting webpack can be customized using the `GUTENBERG_LIVE_RELOAD_PORT` environment variable. For example: `GUTENBERG_LIVE_RELOAD_PORT=123456 npm run dev` will run the livereload server on port 123456. Together with the `GUTENBERG_LIVE_RELOAD` constant, this can be used to run multiple livereload servers.

lib/client-assets.php

@@ -464,6 +464,15 @@ function gutenberg_register_scripts_and_styles() {
 		array( 'wp-element', 'wp-components', 'wp-utils', 'wp-data' ),
 		filemtime( gutenberg_dir_path() . 'build/plugins/index.js' )
 	);
+
+	if ( defined( 'GUTENBERG_LIVE_RELOAD' ) && GUTENBERG_LIVE_RELOAD ) {
+		$live_reload_url = ( GUTENBERG_LIVE_RELOAD === true ) ? 'http://localhost:35729/livereload.js' : GUTENBERG_LIVE_RELOAD;
+
+		wp_enqueue_script(
+			'gutenberg-live-reload',
+			$live_reload_url
+		);
+	}
 }
 add_action( 'wp_enqueue_scripts', 'gutenberg_register_scripts_and_styles', 5 );
 add_action( 'admin_enqueue_scripts', 'gutenberg_register_scripts_and_styles', 5 );

package.json

@@ -98,6 +98,7 @@
 		"style-loader": "0.20.3",
 		"webpack": "4.8.3",
 		"webpack-cli": "2.1.3",
+		"webpack-livereload-plugin": "2.1.1",
 		"webpack-rtl-plugin": "github:yoavf/webpack-rtl-plugin#develop"
 	},
 	"babel": {

webpack.config.js

@@ -3,6 +3,7 @@
  */
 const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
 const WebpackRTLPlugin = require( 'webpack-rtl-plugin' );
+const LiveReloadPlugin = require( 'webpack-livereload-plugin' );
 
 const { get } = require( 'lodash' );
 const { basename } = require( 'path' );
@@ -301,4 +302,8 @@ if ( config.mode !== 'production' ) {
 	config.devtool = process.env.SOURCEMAP || 'source-map';
 }
 
+if ( config.mode === 'development' ) {
+	config.plugins.push( new LiveReloadPlugin( { port: process.env.GUTENBERG_LIVE_RELOAD_PORT || 35729 } ) );
+}
+
 module.exports = config;