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

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## 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

package/lib/index.js

@@ -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(
@@ -129,14 +129,14 @@ class DependencyExtractionWebpackPlugin {
 							stage: compiler.webpack.Compilation
 								.PROCESS_ASSETS_STAGE_ANALYSE,
 						},
-						() => this.addAssets( compilation, compiler )
+						() => this.addAssets( compilation )
 					);
 				}
 			);
 		}
 	}
 
-	addAssets( compilation, compiler ) {
+	addAssets( compilation ) {
 		const {
 			combineAssets,
 			combinedOutputFile,
@@ -162,124 +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 { hashFunction, hashDigest, hashDigestLength } =
-				compilation.outputOptions;
-
 			// Go through the assets and hash the sources. We can't just use
-			// `entrypointChunk.contentHash` because that's not updated when
+			// `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 hash = createHash( hashFunction );
-			for ( const filename of entrypoint.getFiles().sort() ) {
-				const asset = compilation.getAsset( filename );
-				hash.update( asset.source.buffer() );
-			}
-			const version = hash
+			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 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,
+				dependencies: Array.from( chunkDeps ).sort(),
+				version: contentHash,
 			};
 
-			const assetString = this.stringify( assetData );
-			const contentHash = createHash( hashFunction )
-				.update( assetString )
-				.digest( hashDigest )
-				.slice( 0, hashDigestLength );
-
-			// 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,
-				}
-			);
-
 			if ( combineAssets ) {
-				combinedAssetsData[ buildFilename ] = assetData;
+				combinedAssetsData[ chunkJSFile ] = assetData;
 				continue;
 			}
 
 			let assetFilename;
-
 			if ( outputFilename ) {
 				assetFilename = compilation.getPath( outputFilename, {
-					chunk: entrypointChunk,
-					filename,
-					query,
-					basename: basename( filename ),
+					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,
@@ -299,11 +277,4 @@ class DependencyExtractionWebpackPlugin {
 	}
 }
 
-function basename( name ) {
-	if ( ! name.includes( '/' ) ) {
-		return name;
-	}
-	return name.substr( name.lastIndexOf( '/' ) + 1 );
-}
-
 module.exports = DependencyExtractionWebpackPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dependency-extraction-webpack-plugin",
-	"version": "3.6.0",
+	"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": "48d5f37dfb52d2e77c8eeb662f9874cf141b8c6b"
+	"gitHead": "9d9d33bbdf317a4381b8ca1713e43bb50df653b3"
 }