dependency-extraction-webpack-plugin: Calculate vendor hash from file…

… output rather than Webpack internal state (#34969)

* Use `contentHash` in dependency-extraction-webpack-plugin

Webpack 5 recommends using the content hash over the old-style chunk
hash for cache invalidation, as the chunk hash can change even if the
output does not.

dependency-extraction-webpack-plugin will now include the content hash
for each content type in the asset file. The `version` field is still
present, now as a combined hash for all the content types reported, to
maintain backwards compatibility.

Fixes #34660

* Don't expose individual assets' contentHashes, it's considered too scary.

* Hash assets directly, chunk.contentHash doesn't get updated by minification

* Switch hash to match #40503

* Changelog entry

packages/dependency-extraction-webpack-plugin/CHANGELOG.md

@@ -6,6 +6,7 @@
 
 -   Use OpenSSL provider supported in Node 17+ when calling `crypto.createHash` ([#40503](https://github.com/WordPress/gutenberg/pull/40503)).
 -   Add new line at the end of generated `*.asset.php` files ([#40753](https://github.com/WordPress/gutenberg/pull/40753)).
+-   Calculate version hashes based on output file contents rather than input files and other Webpack internal state ([#34969](https://github.com/WordPress/gutenberg/pull/34969)).
 
 ## 3.3.0 (2022-01-27)
 

packages/dependency-extraction-webpack-plugin/lib/index.js

@@ -128,7 +128,7 @@ class DependencyExtractionWebpackPlugin {
 							name: this.constructor.name,
 							stage:
 								compiler.webpack.Compilation
-									.PROCESS_ASSETS_STAGE_ADDITIONAL,
+									.PROCESS_ASSETS_STAGE_ANALYSE,
 						},
 						() => this.addAssets( compilation, compiler )
 					);
@@ -198,14 +198,25 @@ class DependencyExtractionWebpackPlugin {
 				}
 			}
 
+			// Go through the assets and hash the sources. We can't just use
+			// `entrypointChunk.contentHash` because that's not updated when
+			// assets are minified. Sigh.
+			// @todo Use `asset.info.contenthash` if we can make sure it's reliably set.
+			const hash = createHash( 'sha512' );
+			for ( const filename of entrypoint.getFiles().sort() ) {
+				const asset = compilation.getAsset( filename );
+				hash.update( `${ filename }: ` );
+				asset.source.updateHash( hash );
+			}
+
 			const entrypointChunk = isWebpack4
 				? entrypoint.chunks.find( ( c ) => c.name === entrypointName )
 				: entrypoint.getEntrypointChunk();
 
 			const assetData = {
 				// Get a sorted array so we can produce a stable, stringified representation.
 				dependencies: Array.from( entrypointExternalizedWpDeps ).sort(),
-				version: entrypointChunk.hash,
+				version: hash.digest( 'hex' ).substring( 0, 32 ),
 			};
 
 			const assetString = this.stringify( assetData );

packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DependencyExtractionWebpackPlugin Webpack \`combine-assets\` should produce expected output: Asset file 'assets.php' should match snapshot 1`] = `
-"<?php return array('fileA.js' => array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'dd2fe63dd2d581e01ace6923ea5f1150'), 'fileB.js' => array('dependencies' => array('wp-token-list'), 'version' => '72d30a2459a6c29ccbc8bc4a8c6641b7'));
+"<?php return array('fileA.js' => array('dependencies' => array('lodash', 'wp-blob'), 'version' => '3e34cc9f8b5062d43bb05d71a9865ab1'), 'fileB.js' => array('dependencies' => array('wp-token-list'), 'version' => '59ef1b47eaac81d79d740e4357df7209'));
 "
 `;
 
@@ -32,7 +32,7 @@ Array [
 `;
 
 exports[`DependencyExtractionWebpackPlugin Webpack \`dynamic-import\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '52a95452a51ae14be315bbac91fd66bf');
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'f210c845cbb975aa12ca53703279950b');
 "
 `;
 
@@ -55,7 +55,7 @@ Array [
 `;
 
 exports[`DependencyExtractionWebpackPlugin Webpack \`function-output-filename\` should produce expected output: Asset file 'chunk--main--main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'c44010df32f758565726bcefbf69a28b');
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '978b7e0c7b7f291c4b16b534a7a431a3');
 "
 `;
 
@@ -78,7 +78,7 @@ Array [
 `;
 
 exports[`DependencyExtractionWebpackPlugin Webpack \`has-extension-suffix\` should produce expected output: Asset file 'index.min.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '7e289f109b13dd69d9a1097f90bcfeb2');
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'd57351543a76eca838d184863322b856');
 "
 `;
 
@@ -101,21 +101,21 @@ Array [
 `;
 
 exports[`DependencyExtractionWebpackPlugin Webpack \`no-default\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array(), 'version' => '90ac5f67b465feaec264ee3047123919');
+"<?php return array('dependencies' => array(), 'version' => '6041d7727db98d5f89967189c9ac013f');
 "
 `;
 
 exports[`DependencyExtractionWebpackPlugin Webpack \`no-default\` should produce expected output: External modules should match snapshot 1`] = `Array []`;
 
 exports[`DependencyExtractionWebpackPlugin Webpack \`no-deps\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array(), 'version' => 'e666cc803ddb8b960a12755e87d0321c');
+"<?php return array('dependencies' => array(), 'version' => '86ff60df0b0f882f2a05d1a67ff97cf4');
 "
 `;
 
 exports[`DependencyExtractionWebpackPlugin Webpack \`no-deps\` should produce expected output: External modules should match snapshot 1`] = `Array []`;
 
 exports[`DependencyExtractionWebpackPlugin Webpack \`option-function-output-filename\` should produce expected output: Asset file 'chunk--main--main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'c44010df32f758565726bcefbf69a28b');
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '9e10498153cf094d8c25892525d3cd6c');
 "
 `;
 
@@ -138,7 +138,7 @@ Array [
 `;
 
 exports[`DependencyExtractionWebpackPlugin Webpack \`option-output-filename\` should produce expected output: Asset file 'main-foo.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'c44010df32f758565726bcefbf69a28b');
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '9e10498153cf094d8c25892525d3cd6c');
 "
 `;
 
@@ -160,7 +160,7 @@ Array [
 ]
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`output-format-json\` should produce expected output: Asset file 'main.asset.json' should match snapshot 1`] = `"{\\"dependencies\\":[\\"lodash\\"],\\"version\\":\\"ff689135319685f74bf813654f70c5a4\\"}"`;
+exports[`DependencyExtractionWebpackPlugin Webpack \`output-format-json\` should produce expected output: Asset file 'main.asset.json' should match snapshot 1`] = `"{\\"dependencies\\":[\\"lodash\\"],\\"version\\":\\"2a8570fd30cadd4123ee368f90128519\\"}"`;
 
 exports[`DependencyExtractionWebpackPlugin Webpack \`output-format-json\` should produce expected output: External modules should match snapshot 1`] = `
 Array [
@@ -173,7 +173,7 @@ Array [
 `;
 
 exports[`DependencyExtractionWebpackPlugin Webpack \`overrides\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('wp-blob', 'wp-script-handle-for-rxjs', 'wp-url'), 'version' => '97c94d19d2d93c0ef60f14d590cf1204');
+"<?php return array('dependencies' => array('wp-blob', 'wp-script-handle-for-rxjs', 'wp-url'), 'version' => '5620bf1846e497728408912a36d99af6');
 "
 `;
 
@@ -212,12 +212,12 @@ Array [
 `;
 
 exports[`DependencyExtractionWebpackPlugin Webpack \`runtime-chunk-single\` should produce expected output: Asset file 'a.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('wp-blob'), 'version' => 'd189640bf0bd44c2f6f9fee71b00d756');
+"<?php return array('dependencies' => array('wp-blob'), 'version' => 'e575aabfcecd0c966cba4df4985af039');
 "
 `;
 
 exports[`DependencyExtractionWebpackPlugin Webpack \`runtime-chunk-single\` should produce expected output: Asset file 'b.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'dd30d1b96694d89afddbfad01a09ee4d');
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'd86c3101fe7a68a43edb695f5f897b62');
 "
 `;
 
@@ -240,7 +240,7 @@ Array [
 `;
 
 exports[`DependencyExtractionWebpackPlugin Webpack \`wordpress\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'c44010df32f758565726bcefbf69a28b');
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '9e10498153cf094d8c25892525d3cd6c');
 "
 `;
 
@@ -263,7 +263,7 @@ Array [
 `;
 
 exports[`DependencyExtractionWebpackPlugin Webpack \`wordpress-require\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '4f30547fb762285f57176ff70a968bbc');
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'ad8b8843fa9f514255fde2cc0c16b48c');
 "
 `;