Scripts: Convert legacy entry point arguments for compatibility with webpack 5

packages/scripts/config/webpack.config.js

@@ -7,6 +7,7 @@ const MiniCSSExtractPlugin = require( 'mini-css-extract-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );
 const browserslist = require( 'browserslist' );
+const fs = require( 'fs' );
 const path = require( 'path' );
 
 /**
@@ -31,6 +32,21 @@ let target = 'browserslist';
 if ( ! browserslist.findConfig( '.' ) ) {
 	target += ':' + fromConfigRoot( '.browserslistrc' );
 }
+let entry = {};
+if ( process.env.WP_ENTRY ) {
+	entry = JSON.parse( process.env.WP_ENTRY );
+} else {
+	[ 'index' ].forEach( ( entryName ) => {
+		const filepath = path.resolve(
+			process.cwd(),
+			'src',
+			`${ entryName }.js`
+		);
+		if ( fs.existsSync( filepath ) ) {
+			entry[ entryName ] = filepath;
+		}
+	} );
+}
 
 const cssLoaders = [
 	{
@@ -88,9 +104,7 @@ const getLiveReloadPort = ( inputPort ) => {
 const config = {
 	mode,
 	target,
-	entry: {
-		index: path.resolve( process.cwd(), 'src', 'index.js' ),
-	},
+	entry,
 	output: {
 		filename: '[name].js',
 		path: path.resolve( process.cwd(), 'build' ),

packages/scripts/utils/config.js

@@ -110,36 +110,47 @@ const getWebpackArgs = () => {
 		hasArgInCLI( '-o' ) || hasArgInCLI( '--output' );
 	if ( hasFileArgInCLI() && ! hasWebpackOutputOption ) {
 		/**
-		 * Converts a path to the entry format supported by webpack, e.g.:
-		 * `./entry-one.js` -> `entry-one=./entry-one.js`
-		 * `entry-two.js` -> `entry-two=./entry-two.js`
+		 * Converts a legacy path to the entry pair supported by webpack, e.g.:
+		 * `./entry-one.js` -> `[ 'entry-one', './entry-one.js] ]`
+		 * `entry-two.js` -> `[ 'entry-two', './entry-two.js' ]`
 		 *
 		 * @param {string} path The path provided.
 		 *
-		 * @return {string} The entry format supported by webpack.
+		 * @return {string[]} The entry pair of its name and the file path.
 		 */
 		const pathToEntry = ( path ) => {
-			const entry = basename( path, '.js' );
+			const entryName = basename( path, '.js' );
 
 			if ( ! path.startsWith( './' ) ) {
 				path = './' + path;
 			}
 
-			return [ entry, path ].join( '=' );
+			return [ entryName, path ];
 		};
 
-		// The following handles the support for multiple entry points in webpack, e.g.:
-		// `wp-scripts build one.js custom=./two.js` -> `webpack one=./one.js custom=./two.js`
-		webpackArgs = webpackArgs.map( ( cliArg ) => {
-			if (
-				getFileArgsFromCLI().includes( cliArg ) &&
-				! cliArg.includes( '=' )
-			) {
-				return pathToEntry( cliArg );
-			}
-
-			return cliArg;
-		} );
+		const fileArgs = getFileArgsFromCLI();
+		if ( fileArgs.length > 0 ) {
+			// Filters out all CLI arguments that are recognized as file paths.
+			const fileArgsToRemove = new Set( fileArgs );
+			webpackArgs = webpackArgs.filter( ( cliArg ) => {
+				if ( fileArgsToRemove.has( cliArg ) ) {
+					fileArgsToRemove.delete( cliArg );
+					return false;
+				}
+				return true;
+			} );
+
+			// Converts all CLI arguments that are file paths to the `entry` format supported by webpack.
+			// It is going to be consumed in the config through the WP_ENTRY global variable.
+			const entry = {};
+			fileArgs.forEach( ( fileArg ) => {
+				const [ entryName, path ] = fileArg.includes( '=' )
+					? fileArg.split( '=' )
+					: pathToEntry( fileArg );
+				entry[ entryName ] = path;
+			} );
+			process.env.WP_ENTRY = JSON.stringify( entry );
+		}
 	}
 
 	if ( ! hasWebpackConfig() ) {