Add woocommerce/dependency-extraction-webpack-plugin + cleaned up version

of webpack config. Thanks @haszari

Author: ksere

package-lock.json

@@ -23,6 +23,7 @@
     "lodash": "^4.17.15"
   },
   "devDependencies": {
+    "@woocommerce/dependency-extraction-webpack-plugin": "^1.6.0",
     "@woocommerce/eslint-plugin": "^1.2.0",
     "@wordpress/eslint-plugin": "^9.0.2",
     "@wordpress/scripts": "^16.1.4",

package.json

@@ -1,100 +1,53 @@
-// Load the default @wordpress/scripts config object
 const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
-const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
-const path = require( 'path' );
+const WooCommerceDependencyExtractionWebpackPlugin = require( '@woocommerce/dependency-extraction-webpack-plugin' );
 
 const requestToExternal = ( request ) => {
-	// The following default externals are bundled for compatibility with older versions of WP
-	// Note CSS for specific components is bundled via admin/assets/src/index.scss
-	// WP 5.4 is the min version for <Card* />, <TabPanel />
-	const bundled = [
-		'@wordpress/compose',
-		'@wordpress/components',
-		'@wordpress/primitives',
-	];
+	// Bundle these packages & components so we can use the latest, independent of WordPress version.
+	// Without bundling these specific recent versions, components like LandingPageApp don't render correctly.
+	const bundled = [ '@wordpress/components' ];
 	if ( bundled.includes( request ) ) {
 		return false;
 	}
-
-	const wcDepMap = {
-		'@woocommerce/navigation': [ 'wc', 'navigation' ],
-	};
-
-	return wcDepMap[ request ];
 };
 
-const requestToHandle = ( request ) => {
-	const wcHandleMap = {
-		'@woocommerce/components': 'wc-components',
-		'@woocommerce/navigation': 'wc-navigation',
-	};
-
-	return wcHandleMap[ request ];
-};
+// Replace the default DependencyExtractionWebpackPlugin with the Woo version
+// and override to bundle specific newer packages (see requestToExternal above).
+const ourPlugins = [
+	...defaultConfig.plugins.filter(
+		( plugin ) =>
+			plugin.constructor.name !== 'DependencyExtractionWebpackPlugin'
+	),
+	new WooCommerceDependencyExtractionWebpackPlugin( {
+		injectPolyfill: true, // TBD Confirm this is needed for Pinterest.
+		requestToExternal,
+	} ),
+];
 
-// Use the defaultConfig but replace the entry and output properties
+// Webpack config for main admin app - onboarding and settings.
 const SetupGuide = {
-    ...defaultConfig,
-	resolve: {
-		...defaultConfig.resolve,
-		alias: {
-			'.~': path.resolve( process.cwd(), 'assets/source/' ),
-		},
-		// Resolve jsx/tsx files for `@woocommerce/data`...`/with-plugins-hydration`
-		extensions: [ '.js', '.jsx', '.json' ],
+	...defaultConfig,
+	plugins: ourPlugins,
+	entry: {
+		index: './assets/source/setup-guide/index.js',
 	},
-    plugins: [
-		...defaultConfig.plugins.filter(
-			( plugin ) =>
-				plugin.constructor.name !== 'DependencyExtractionWebpackPlugin'
-		),
-		new DependencyExtractionWebpackPlugin( {
-			injectPolyfill: true,
-			requestToExternal,
-			requestToHandle,
-		} ),
-	],
-    entry: {
-        index: './assets/source/setup-guide/index.js',
-    },
-    output: {
+	output: {
 		...defaultConfig.output,
-        filename: '[name].js',
-        path: __dirname + '/assets/setup-guide',
-    },
+		filename: '[name].js',
+		path: __dirname + '/assets/setup-guide',
+	},
 };
 
+// Webpack config for script to add our setup task.
 const SetupTask = {
-    ...defaultConfig,
-	resolve: {
-		...defaultConfig.resolve,
-		alias: {
-			'.~': path.resolve( process.cwd(), 'assets/source/' ),
-		},
-		// Resolve jsx/tsx files for `@woocommerce/data`...`/with-plugins-hydration`
-		extensions: [ '.ts', '.tsx', '.js', '.jsx', '.json' ],
+	...defaultConfig,
+	plugins: ourPlugins,
+	entry: {
+		index: './assets/source/setup-task/index.js',
+	},
+	output: {
+		filename: '[name].js',
+		path: __dirname + '/assets/setup-task',
 	},
-    plugins: [
-		...defaultConfig.plugins.filter(
-			( plugin ) =>
-				plugin.constructor.name !== 'DependencyExtractionWebpackPlugin'
-		),
-		new DependencyExtractionWebpackPlugin( {
-			injectPolyfill: true,
-			requestToExternal,
-			requestToHandle,
-		} ),
-	],
-    entry: {
-        index: './assets/source/setup-task/index.js',
-    },
-    output: {
-        filename: '[name].js',
-        path: __dirname + '/assets/setup-task',
-    },
 };
 
-module.exports = [
-    SetupGuide,
-    SetupTask
-];
+module.exports = [ SetupGuide, SetupTask ];