Add outputFilename option

Allows specifying the asset filename format separately from the output
filename format. This is useful when the output filenames include a
hash.

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

@@ -107,6 +107,13 @@ module.exports = {
 
 The output format for the generated asset file. There are two options available: 'php' or 'json'.
 
+##### `outputFilename`
+
+- Type: string | function
+- Default: null
+
+The filename for the generated asset file. Accepts the same values as the Webpack `output.filename` option.
+
 ##### `combineAssets`
 
 -   Type: boolean

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

@@ -28,6 +28,7 @@ class DependencyExtractionWebpackPlugin {
 				externalizedReport: false,
 				injectPolyfill: false,
 				outputFormat: 'php',
+				outputFilename: null,
 				useDefaults: true,
 			},
 			options
@@ -143,6 +144,7 @@ class DependencyExtractionWebpackPlugin {
 			externalizedReport,
 			injectPolyfill,
 			outputFormat,
+			outputFilename,
 		} = this.options;
 
 		// Dump actually externalized dependencies to a report file.
@@ -228,10 +230,24 @@ class DependencyExtractionWebpackPlugin {
 				continue;
 			}
 
-			const assetFilename = buildFilename.replace(
-				/\.js$/i,
-				'.asset.' + ( outputFormat === 'php' ? 'php' : 'json' )
-			);
+			let assetFilename;
+
+			if ( outputFilename ) {
+				assetFilename = compilation.getPath( outputFilename, {
+					chunk: entrypointChunk,
+					filename,
+					query,
+					basename: basename( filename ),
+					contentHash: createHash( 'md4' )
+						.update( assetString )
+						.digest( 'hex' ),
+				} );
+			} else {
+				assetFilename = buildFilename.replace(
+					/\.js$/i,
+					'.asset.' + ( outputFormat === 'php' ? 'php' : 'json' )
+				);
+			}
 
 			// Add source and file into compilation for webpack to output.
 			compilation.assets[ assetFilename ] = new RawSource( assetString );

packages/dependency-extraction-webpack-plugin/lib/types.d.ts

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

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

@@ -96,6 +96,46 @@ exports[`Webpack \`no-deps\` should produce expected output: Asset file 'main.as
 
 exports[`Webpack \`no-deps\` should produce expected output: External modules should match snapshot 1`] = `Array []`;
 
+exports[`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' => '844c4b1f2a6db3a13416e9ea339e6334');"`;
+
+exports[`Webpack \`option-function-output-filename\` should produce expected output: External modules should match snapshot 1`] = `
+Array [
+  Object {
+    "externalType": "window",
+    "request": "lodash",
+    "userRequest": "lodash",
+  },
+  Object {
+    "externalType": "window",
+    "request": Array [
+      "wp",
+      "blob",
+    ],
+    "userRequest": "@wordpress/blob",
+  },
+]
+`;
+
+exports[`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' => '844c4b1f2a6db3a13416e9ea339e6334');"`;
+
+exports[`Webpack \`option-output-filename\` should produce expected output: External modules should match snapshot 1`] = `
+Array [
+  Object {
+    "externalType": "window",
+    "request": "lodash",
+    "userRequest": "lodash",
+  },
+  Object {
+    "externalType": "window",
+    "request": Array [
+      "wp",
+      "blob",
+    ],
+    "userRequest": "@wordpress/blob",
+  },
+]
+`;
+
 exports[`Webpack \`output-format-json\` should produce expected output: Asset file 'main.asset.json' should match snapshot 1`] = `"{\\"dependencies\\":[\\"lodash\\"],\\"version\\":\\"c0593f49cf023b00b43d085327cd4e3b\\"}"`;
 
 exports[`Webpack \`output-format-json\` should produce expected output: External modules should match snapshot 1`] = `

packages/dependency-extraction-webpack-plugin/test/fixtures/option-function-output-filename/index.js

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { isBlobURL } from '@wordpress/blob';
+
+/**
+ * External dependencies
+ */
+import _ from 'lodash';
+
+_.isEmpty( isBlobURL( '' ) );

packages/dependency-extraction-webpack-plugin/test/fixtures/option-function-output-filename/webpack.config.js

@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+const DependencyExtractionWebpackPlugin = require( '../../..' );
+
+module.exports = {
+	plugins: [
+		new DependencyExtractionWebpackPlugin( {
+			outputFilename( chunkData ) {
+				return `chunk--${ chunkData.chunk.name }--[name].asset.php`;
+			},
+		} ),
+	],
+};

packages/dependency-extraction-webpack-plugin/test/fixtures/option-output-filename/index.js

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { isBlobURL } from '@wordpress/blob';
+
+/**
+ * External dependencies
+ */
+import _ from 'lodash';
+
+_.isEmpty( isBlobURL( '' ) );

packages/dependency-extraction-webpack-plugin/test/fixtures/option-output-filename/webpack.config.js

@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+const DependencyExtractionWebpackPlugin = require( '../../..' );
+
+module.exports = {
+	plugins: [
+		new DependencyExtractionWebpackPlugin( {
+			outputFilename: '[name]-foo.asset.php',
+		} ),
+	],
+};