Refactor the logic to use process.env.WP_ENTRY

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', 'view' ].forEach( ( entryName ) => {
+		const filepath = path.resolve(
+			process.cwd(),
+			'src',
+			`${ entryName }.js`
+		);
+		if ( fs.existsSync( filepath ) ) {
+			entry[ entryName ] = filepath;
+		}
+	} );
+}
 
 const cssLoaders = [
 	{
@@ -88,6 +104,7 @@ const getLiveReloadPort = ( inputPort ) => {
 const config = {
 	mode,
 	target,
+	entry,
 	output: {
 		filename: '[name].js',
 		path: path.resolve( process.cwd(), 'build' ),
@@ -247,9 +264,4 @@ if ( ! isProduction ) {
 	} );
 }
 
-module.exports = ( env ) => ( {
-	...config,
-	entry: env.entries || {
-		index: path.resolve( process.cwd(), 'src', 'index.js' ),
-	},
-} );
+module.exports = config;

packages/scripts/utils/config.js

@@ -110,38 +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 = 'entries.' + basename( path, '.js' );
+			const entryName = basename( path, '.js' );
 
 			if ( ! path.startsWith( './' ) ) {
 				path = './' + path;
 			}
 
-			return [ '--env', [ 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.reduce( ( args, cliArg ) => {
-			if ( ! getFileArgsFromCLI().includes( cliArg ) ) {
-				args.push( cliArg );
-				return args;
-			}
-			if ( cliArg.includes( '=' ) ) {
-				args.push( '--env', 'entries.' + cliArg );
-			} else {
-				args.push( ...pathToEntry( cliArg ) );
-			}
-			return args;
-		}, [] );
+		const fileArgs = getFileArgsFromCLI();
+		if ( fileArgs.length > 0 ) {
+			// Filter out all CLI arguments that are file paths.
+			const fileArgsToRemove = new Set( fileArgs );
+			webpackArgs = webpackArgs.filter( ( cliArg ) => {
+				if ( fileArgsToRemove.has( cliArg ) ) {
+					fileArgsToRemove.delete( cliArg );
+					return false;
+				}
+				return true;
+			} );
+
+			// Convert 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() ) {