Scripts: Convert legacy entry point arguments for compatibility with …

…webpack 5 (#34264) * Remove code to convert entrypoint argument conversion * Change entrypoint configuration to be passed by environment variables. * Change the operator to support older versions of node. * Change the logic to support = syntax for specifying output filenames. * Refactor the logic to use `process.env.WP_ENTRY` * Update webpack.config.js * Apply suggestions from code review * Update packages/scripts/config/webpack.config.js * Improve handling when `--entry` arg present Co-authored-by: Grzegorz Ziolkowski <[email protected]>
WordPress · Sep 9, 2021 · 731659c · 731659c
1 parent 708538a
commit 731659c
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 22 deletions.
diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Bug Fixes
 
 -   Bring back support for SVG files in CSS ([#34394](https://github.com/WordPress/gutenberg/pull/34394)). It wasn't correctly migrated when integrating webpack v5.
+-   Convert legacy entry point arguments supported in webpack 4 for compatibility with webpack 5 ([#34264](https://github.com/WordPress/gutenberg/pull/34264)).
 
 ## 18.0.0 (2021-08-23)
 

diff --git a/packages/scripts/config/webpack.config.js b/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,23 @@ let target = 'browserslist';
 if ( ! browserslist.findConfig( '.' ) ) {
 	target += ':' + fromConfigRoot( '.browserslistrc' );
 }
+let entry = {};
+if ( process.env.WP_ENTRY ) {
+	entry = JSON.parse( process.env.WP_ENTRY );
+} else {
+	// By default the script checks if `src/index.js` exists and sets it as an entry point.
+	// In the future we should add similar handling for `src/script.js` and `src/view.js`.
+	[ 'index' ].forEach( ( entryName ) => {
+		const filepath = path.resolve(
+			process.cwd(),
+			'src',
+			`${ entryName }.js`
+		);
+		if ( fs.existsSync( filepath ) ) {
+			entry[ entryName ] = filepath;
+		}
+	} );
+}
 
 const cssLoaders = [
 	{
@@ -88,9 +106,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' ),

diff --git a/packages/scripts/utils/config.js b/packages/scripts/utils/config.js
@@ -108,38 +108,53 @@ const getWebpackArgs = () => {
 
 	const hasWebpackOutputOption =
 		hasArgInCLI( '-o' ) || hasArgInCLI( '--output' );
-	if ( hasFileArgInCLI() && ! hasWebpackOutputOption ) {
+	if (
+		! hasWebpackOutputOption &&
+		! hasArgInCLI( '--entry' ) &&
+		hasFileArgInCLI()
+	) {
 		/**
-		 * 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() ) {