@wordpress/dependency-extraction-webpack-plugin 3.4.2 → 3.7.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ## Unreleased
 
+## 3.7.0 (2022-07-13)
+
+### New Features
+
+-   Output asset files for shared chunks, too ([#41002](https://github.com/WordPress/gutenberg/pull/41002)).
+
+## 3.5.0 (2022-05-18)
+
+### Bug Fix
+
+-   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)
 
 -   Add the optional `externalizedReportFile` option ([#35106](https://github.com/WordPress/gutenberg/pull/35106)).

package/lib/index.js

@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-const { createHash } = require( 'crypto' );
 const path = require( 'path' );
 const webpack = require( 'webpack' );
 // In webpack 5 there is a `webpack.sources` field but for webpack 4 we have to fallback to the `webpack-sources` package.
 const { RawSource } = webpack.sources || require( 'webpack-sources' );
 const json2php = require( 'json2php' );
 const isWebpack4 = webpack.version.startsWith( '4.' );
+const { createHash } = webpack.util;
 
 /**
  * Internal dependencies
@@ -106,7 +106,7 @@ class DependencyExtractionWebpackPlugin {
 		if ( this.options.outputFormat === 'php' ) {
 			return `<?php return ${ json2php(
 				JSON.parse( JSON.stringify( asset ) )
-			) };`;
+			) };\n`;
 		}
 
 		return JSON.stringify( asset );
@@ -117,7 +117,7 @@ class DependencyExtractionWebpackPlugin {
 
 		if ( isWebpack4 ) {
 			compiler.hooks.emit.tap( this.constructor.name, ( compilation ) =>
-				this.addAssets( compilation, compiler )
+				this.addAssets( compilation )
 			);
 		} else {
 			compiler.hooks.thisCompilation.tap(
@@ -126,18 +126,17 @@ class DependencyExtractionWebpackPlugin {
 					compilation.hooks.processAssets.tap(
 						{
 							name: this.constructor.name,
-							stage:
-								compiler.webpack.Compilation
-									.PROCESS_ASSETS_STAGE_ADDITIONAL,
+							stage: compiler.webpack.Compilation
+								.PROCESS_ASSETS_STAGE_ANALYSE,
 						},
-						() => this.addAssets( compilation, compiler )
+						() => this.addAssets( compilation )
 					);
 				}
 			);
 		}
 	}
 
-	addAssets( compilation, compiler ) {
+	addAssets( compilation ) {
 		const {
 			combineAssets,
 			combinedOutputFile,
@@ -163,106 +162,102 @@ class DependencyExtractionWebpackPlugin {
 
 		const combinedAssetsData = {};
 
-		// Process each entry point independently.
-		for ( const [
-			entrypointName,
-			entrypoint,
-		] of compilation.entrypoints.entries() ) {
-			const entrypointExternalizedWpDeps = new Set();
+		// Accumulate all entrypoint chunks, some of them shared
+		const entrypointChunks = new Set();
+		for ( const entrypoint of compilation.entrypoints.values() ) {
+			for ( const chunk of entrypoint.chunks ) {
+				entrypointChunks.add( chunk );
+			}
+		}
+
+		// Process each entrypoint chunk independently
+		for ( const chunk of entrypointChunks ) {
+			const chunkFiles = Array.from( chunk.files );
+
+			const chunkJSFile = chunkFiles.find( ( f ) => /\.js$/i.test( f ) );
+			if ( ! chunkJSFile ) {
+				// There's no JS file in this chunk, no work for us. Typically a `style.css` from cache group.
+				continue;
+			}
+
+			const chunkDeps = new Set();
 			if ( injectPolyfill ) {
-				entrypointExternalizedWpDeps.add( 'wp-polyfill' );
+				chunkDeps.add( 'wp-polyfill' );
 			}
 
 			const processModule = ( { userRequest } ) => {
 				if ( this.externalizedDeps.has( userRequest ) ) {
-					const scriptDependency = this.mapRequestToDependency(
-						userRequest
-					);
-					entrypointExternalizedWpDeps.add( scriptDependency );
+					chunkDeps.add( this.mapRequestToDependency( userRequest ) );
 				}
 			};
 
 			// Search for externalized modules in all chunks.
-			for ( const chunk of entrypoint.chunks ) {
-				const modulesIterable = isWebpack4
-					? chunk.modulesIterable
-					: compilation.chunkGraph.getChunkModules( chunk );
-				for ( const chunkModule of modulesIterable ) {
-					processModule( chunkModule );
-					// Loop through submodules of ConcatenatedModule.
-					if ( chunkModule.modules ) {
-						for ( const concatModule of chunkModule.modules ) {
-							processModule( concatModule );
-						}
+			const modulesIterable = isWebpack4
+				? chunk.modulesIterable
+				: compilation.chunkGraph.getChunkModules( chunk );
+			for ( const chunkModule of modulesIterable ) {
+				processModule( chunkModule );
+				// Loop through submodules of ConcatenatedModule.
+				if ( chunkModule.modules ) {
+					for ( const concatModule of chunkModule.modules ) {
+						processModule( concatModule );
 					}
 				}
 			}
 
-			const entrypointChunk = isWebpack4
-				? entrypoint.chunks.find( ( c ) => c.name === entrypointName )
-				: entrypoint.getEntrypointChunk();
+			// Go through the assets and hash the sources. We can't just use
+			// `chunk.contentHash` because that's not updated when
+			// assets are minified. In practice the hash is updated by
+			// `RealContentHashPlugin` after minification, but it only modifies
+			// already-produced asset filenames and the updated hash is not
+			// available to plugins.
+			const { hashFunction, hashDigest, hashDigestLength } =
+				compilation.outputOptions;
+
+			const contentHash = chunkFiles
+				.sort()
+				.reduce( ( hash, filename ) => {
+					const asset = compilation.getAsset( filename );
+					return hash.update( asset.source.buffer() );
+				}, createHash( hashFunction ) )
+				.digest( hashDigest )
+				.slice( 0, hashDigestLength );
 
 			const assetData = {
 				// Get a sorted array so we can produce a stable, stringified representation.
-				dependencies: Array.from( entrypointExternalizedWpDeps ).sort(),
-				version: entrypointChunk.hash,
+				dependencies: Array.from( chunkDeps ).sort(),
+				version: contentHash,
 			};
 
-			const assetString = this.stringify( assetData );
-
-			// Determine a filename for the asset file.
-			const [ filename, query ] = entrypointName.split( '?', 2 );
-			const buildFilename = compilation.getPath(
-				compiler.options.output.filename,
-				{
-					chunk: entrypointChunk,
-					filename,
-					query,
-					basename: basename( filename ),
-					contentHash: createHash( 'md4' )
-						.update( assetString )
-						.digest( 'hex' ),
-				}
-			);
-
 			if ( combineAssets ) {
-				combinedAssetsData[ buildFilename ] = assetData;
+				combinedAssetsData[ chunkJSFile ] = assetData;
 				continue;
 			}
 
 			let assetFilename;
-
 			if ( outputFilename ) {
 				assetFilename = compilation.getPath( outputFilename, {
-					chunk: entrypointChunk,
-					filename,
-					query,
-					basename: basename( filename ),
-					contentHash: createHash( 'md4' )
-						.update( assetString )
-						.digest( 'hex' ),
+					chunk,
+					filename: chunkJSFile,
+					contentHash,
 				} );
 			} else {
-				assetFilename = buildFilename.replace(
-					/\.js$/i,
-					'.asset.' + ( outputFormat === 'php' ? 'php' : 'json' )
-				);
+				const suffix =
+					'.asset.' + ( outputFormat === 'php' ? 'php' : 'json' );
+				assetFilename = compilation
+					.getPath( '[file]', { filename: chunkJSFile } )
+					.replace( /\.js$/i, suffix );
 			}
 
 			// Add source and file into compilation for webpack to output.
-			compilation.assets[ assetFilename ] = new RawSource( assetString );
-			entrypointChunk.files[ isWebpack4 ? 'push' : 'add' ](
-				assetFilename
+			compilation.assets[ assetFilename ] = new RawSource(
+				this.stringify( assetData )
 			);
+			chunk.files[ isWebpack4 ? 'push' : 'add' ]( assetFilename );
 		}
 
 		if ( combineAssets ) {
-			// Assert the `string` type for output path.
-			// The type indicates the option may be `undefined`.
-			// However, at this point in compilation, webpack has filled the options in if
-			// they were not provided.
-			const outputFolder = /** @type {{path:string}} */ ( compiler.options
-				.output ).path;
+			const outputFolder = compilation.outputOptions.path;
 
 			const assetsFilePath = path.resolve(
 				outputFolder,
@@ -282,11 +277,4 @@ class DependencyExtractionWebpackPlugin {
 	}
 }
 
-function basename( name ) {
-	if ( ! name.includes( '/' ) ) {
-		return name;
-	}
-	return name.substr( name.lastIndexOf( '/' ) + 1 );
-}
-
 module.exports = DependencyExtractionWebpackPlugin;

package/lib/types.d.ts

@@ -11,7 +11,7 @@ declare interface DependencyExtractionWebpackPluginOptions {
 	injectPolyfill?: boolean;
 	useDefaults?: boolean;
 	outputFormat?: 'php' | 'json';
-	outputFilename?: string | Function,
+	outputFilename?: string | Function;
 	requestToExternal?: ( request: string ) => string | string[] | undefined;
 	requestToHandle?: ( request: string ) => string | undefined;
 	combinedOutputFile?: string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dependency-extraction-webpack-plugin",
-	"version": "3.4.2",
+	"version": "3.7.0",
 	"description": "Extract WordPress script dependencies from webpack bundles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,5 +38,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "446565ecaa40370173c18926535e975ec5652b71"
+	"gitHead": "9d9d33bbdf317a4381b8ca1713e43bb50df653b3"
 }