Framework: Use CustomTemplatedPathPlugin updated for Webpack 4 (#5687)

package.json

@@ -58,6 +58,7 @@
 	},
 	"devDependencies": {
 		"@wordpress/babel-preset-default": "1.1.1",
+		"@wordpress/custom-templated-path-webpack-plugin": "1.0.0",
 		"@wordpress/jest-preset-default": "1.0.3",
 		"@wordpress/scripts": "1.1.0",
 		"autoprefixer": "6.7.7",

webpack.config.js

@@ -3,9 +3,14 @@
  */
 const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
 const WebpackRTLPlugin = require( 'webpack-rtl-plugin' );
-const { reduce, escapeRegExp, get } = require( 'lodash' );
+const { get } = require( 'lodash' );
 const { basename } = require( 'path' );
 
+/**
+ * WordPress dependencies
+ */
+const CustomTemplatedPathPlugin = require( '@wordpress/custom-templated-path-webpack-plugin' );
+
 // Main CSS loader for everything but blocks..
 const mainCSSExtractTextPlugin = new ExtractTextPlugin( {
 	filename: './[basename]/build/style.css',
@@ -104,54 +109,6 @@ 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 = {
 	mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
 
@@ -167,7 +124,7 @@ const config = {
 		}, {} )
 	),
 	output: {
-		filename: '[name]/build/index.js',
+		filename: '[basename]/build/index.js',
 		path: __dirname,
 		library: [ 'wp', '[name]' ],
 		libraryTarget: 'this',
@@ -224,7 +181,19 @@ const config = {
 		} ),
 		new CustomTemplatedPathPlugin( {
 			basename( path, data ) {
-				const rawRequest = get( data, [ 'chunk', 'entryModule', 'rawRequest' ] );
+				let rawRequest;
+
+				const entryModule = get( data, [ 'chunk', 'entryModule' ], {} );
+				switch ( entryModule.type ) {
+					case 'javascript/auto':
+						rawRequest = entryModule.rawRequest;
+						break;
+
+					case 'javascript/esm':
+						rawRequest = entryModule.rootModule.rawRequest;
+						break;
+				}
+
 				if ( rawRequest ) {
 					return basename( rawRequest );
 				}