Merge pull request #64 from xwp/add/inits-392-hash-js

INITS-392: Make chunk hash a part of the output filename.

package.json

@@ -31,6 +31,7 @@
   ],
   "devDependencies": {
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@wordpress/dependency-extraction-webpack-plugin": "^3.4.1",
     "@wordpress/env": "^4.2.2",
     "@wordpress/scripts": "^22.1.0",
     "gulp": "^4.0.2",

php/src/class-plugin.php

@@ -87,11 +87,6 @@ protected function register_hooks() {
 		 */
 		add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
 
-		/**
-		 * Load styles for settings UI in Admin.
-		 */
-		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_styles' ) );
-
 		/**
 		 * Load only for modern browsers
 		 */
@@ -138,13 +133,18 @@ public function enqueue_scripts() {
 
 		if ( $site_config && file_exists( $asset_meta_file ) ) {
 			$asset_meta = require $asset_meta_file;
+			$web_vitals_analytics_js_path = sprintf(
+				'/js/dist/module/web-vitals-analytics.%s.js',
+				$asset_meta['version']
+			);
 
-			// Add to footer.
+			// File name contains a calculated hash = no need to use the version parameter.
+			// phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion
 			wp_enqueue_script(
 				self::JS_HANDLE_ANALYTICS,
-				$this->uri_to( '/js/dist/module/web-vitals-analytics.js' ),
+				$this->uri_to( $web_vitals_analytics_js_path ),
 				array(),
-				$asset_meta['version'],
+				null,
 				true
 			);
 
@@ -166,7 +166,7 @@ public function enqueue_scripts() {
 			window.addEventListener( 'load', function() {
 				setTimeout( function() {
 					requestIdleCallback( function() {
-						webVitalsAnalyticsScript = document.querySelector( 'script[data-src*=\"web-vitals-analytics.js\"]' );
+						webVitalsAnalyticsScript = document.querySelector( 'script[data-src*=\"web-vitals-analytics.\"]' );
 						webVitalsAnalyticsScript.src = webVitalsAnalyticsScript.dataset.src;
 						delete webVitalsAnalyticsScript.dataset.src;
 					} );
@@ -179,22 +179,6 @@ public function enqueue_scripts() {
 		}//end if
 	}
 
-	/**
-	 * Enqueue styles for the UI.
-	 */
-	public function enqueue_styles() {
-		$asset_meta_file = $this->path_to( 'css/styles.css' );
-
-		if ( file_exists( $asset_meta_file ) ) {
-			wp_enqueue_style(
-				'site-performance-tracker-styles',
-				$this->uri_to( '/css/styles.css' ),
-				array(),
-				time()
-			);
-		}
-	}
-
 	/**
 	 * Get tracker config to pass to JS.
 	 *
@@ -239,4 +223,3 @@ public function optimize_scripts( $tag, $handle ) {
 		return $tag;
 	}
 }
-

webpack.config.js

@@ -10,6 +10,8 @@ const TerserPlugin = require( 'terser-webpack-plugin' );
 const path = require( 'path' );
 const WebpackBar = require( 'webpackbar' );
 
+const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
+
 const config = {
 	srcDir: '/js/src/',
 	distDirModern: 'js/dist/module/',
@@ -27,6 +29,17 @@ config.legacyJsEntries = {};
  */
 const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
 
+/**
+ * Remove the default `DependencyExtractionWebpackPlugin` instance from
+ * plugins and instantiate a new one with our own options.
+ */
+defaultConfig.plugins = defaultConfig.plugins.filter(
+	( plugin ) => plugin.constructor.name !== 'DependencyExtractionWebpackPlugin'
+);
+defaultConfig.plugins.push( new DependencyExtractionWebpackPlugin( {
+	outputFilename: '[name].asset.php',
+} ) );
+
 const sharedConfig = {
 	optimization: {
 		minimizer: [
@@ -75,8 +88,12 @@ const configureBabelLoader = ( browserlist ) => {
 const modernConfig = {
 	output: {
 		path: path.join( __dirname, config.distDirModern ),
-		filename: `[name].js`,
-		chunkFilename: `[name].js`,
+		filename: `[name].[chunkhash].js`,
+		chunkFilename: `[name].[chunkhash].js`,
+
+		// Needed for [chunkhash] length to match the hard-coded
+		// settings in `DependencyExtractionWebpackPlugin`.
+		hashDigestLength: 32,
 	},
 	module: {
 		rules: [