Build: Add Webpack plugin dirname tag transform

webpack.config.js

@@ -4,10 +4,12 @@
 const webpack = require( 'webpack' );
 const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
 const WebpackRTLPlugin = require( 'webpack-rtl-plugin' );
+const { reduce, escapeRegExp, get } = require( 'lodash' );
+const { basename, dirname } = require( 'path' );
 
 // Main CSS loader for everything but blocks..
 const mainCSSExtractTextPlugin = new ExtractTextPlugin( {
-	filename: './[name]/build/style.css',
+	filename: './[dir]/build/style.css',
 } );
 
 // CSS loader for styles specific to block editing.
@@ -75,6 +77,54 @@ const externals = {
 	};
 } );
 
+/**
+ * Webpack plugin for handling specific template tags in Webpack configuration
+ * values like those supported in the base Webpack functionality (e.g. `name`).
+ *
+ * @see webpack.TemplatedPathPlugin
+ */
+class CustomTemplatedPathPlugin {
+	/**
+	 * CustomTemplatedPathPlugin constructor. Initializes handlers as a tuple
+	 * set of RegExp, handler, where the regular expression is used in matching
+	 * a Webpack asset path.
+	 *
+	 * @param {Object.<string,Function>} handlers Object keyed by tag to match,
+	 *                                            with function value returning
+	 *                                            replacement string.
+	 *
+	 * @return {void}
+	 */
+	constructor( handlers ) {
+		this.handlers = reduce( handlers, ( result, handler, key ) => {
+			const regexp = new RegExp( `\\[${ escapeRegExp( key ) }\\]`, 'gi' );
+			return [ ...result, [ regexp, handler ] ];
+		}, [] );
+	}
+
+	/**
+	 * Webpack plugin application logic.
+	 *
+	 * @param {Object} compiler Webpack compiler
+	 *
+	 * @return {void}
+	 */
+	apply( compiler ) {
+		compiler.plugin( 'compilation', ( compilation ) => {
+			compilation.mainTemplate.plugin( 'asset-path', ( path, data ) => {
+				for ( let i = 0; i < this.handlers.length; i++ ) {
+					const [ regexp, handler ] = this.handlers[ i ];
+					if ( regexp.test( path ) ) {
+						return path.replace( regexp, handler( path, data ) );
+					}
+				}
+
+				return path;
+			} );
+		} );
+	}
+}
+
 const config = {
 	entry: Object.assign(
 		entryPointNames.reduce( ( memo, entryPointName ) => {
@@ -87,7 +137,7 @@ const config = {
 		}, {} )
 	),
 	output: {
-		filename: '[name]/build/index.js',
+		filename: '[dir]/build/index.js',
 		path: __dirname,
 		library: [ 'wp', '[name]' ],
 		libraryTarget: 'this',
@@ -149,6 +199,16 @@ const config = {
 			minimize: process.env.NODE_ENV === 'production',
 			debug: process.env.NODE_ENV !== 'production',
 		} ),
+		new CustomTemplatedPathPlugin( {
+			dir( path, data ) {
+				const request = get( data, [ 'chunk', 'entryModule', 'request' ] );
+				if ( request ) {
+					return basename( dirname( request ) );
+				}
+
+				return path;
+			},
+		} ),
 	],
 	stats: {
 		children: false,