Upgrade webpack to version 5 (#8013)

* Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit f246e25. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
woocommerce · Sep 20, 2023 · c18de39 · c18de39
1 parent f92dba5
commit c18de39
Show file tree

Hide file tree

Showing 24 changed files with 74,113 additions and 30,013 deletions.
diff --git a/...context/hooks/cart/test/use-store-cart.js → ...ontext/hooks/cart/test/use-store-cart.jsx b/...context/hooks/cart/test/use-store-cart.js → ...ontext/hooks/cart/test/use-store-cart.jsx
diff --git a/.../hooks/collections/test/use-collection.js → ...hooks/collections/test/use-collection.jsx b/.../hooks/collections/test/use-collection.js → ...hooks/collections/test/use-collection.jsx
diff --git a/...ase/context/hooks/test/use-query-state.js → ...se/context/hooks/test/use-query-state.jsx b/...ase/context/hooks/test/use-query-state.js → ...se/context/hooks/test/use-query-state.jsx
diff --git a/assets/js/base/hocs/test/with-reviews.js → assets/js/base/hocs/test/with-reviews.jsx b/assets/js/base/hocs/test/with-reviews.js → assets/js/base/hocs/test/with-reviews.jsx
diff --git a/assets/js/base/hooks/test/use-previous.js → assets/js/base/hooks/test/use-previous.jsx b/assets/js/base/hooks/test/use-previous.js → assets/js/base/hooks/test/use-previous.jsx
diff --git a/...s/js/base/hooks/test/use-shallow-equal.js → .../js/base/hooks/test/use-shallow-equal.jsx b/...s/js/base/hooks/test/use-shallow-equal.js → .../js/base/hooks/test/use-shallow-equal.jsx
diff --git a/...rice-filter/test/use-price-constraints.js → ...ice-filter/test/use-price-constraints.jsx b/...rice-filter/test/use-price-constraints.js → ...ice-filter/test/use-price-constraints.jsx
diff --git a/assets/js/hocs/test/with-categories.js → assets/js/hocs/test/with-categories.jsx b/assets/js/hocs/test/with-categories.js → assets/js/hocs/test/with-categories.jsx
diff --git a/assets/js/hocs/test/with-category.js → assets/js/hocs/test/with-category.jsx b/assets/js/hocs/test/with-category.js → assets/js/hocs/test/with-category.jsx
diff --git a/...s/js/hocs/test/with-product-variations.js → .../js/hocs/test/with-product-variations.jsx b/...s/js/hocs/test/with-product-variations.js → .../js/hocs/test/with-product-variations.jsx
diff --git a/assets/js/hocs/test/with-product.js → assets/js/hocs/test/with-product.jsx b/assets/js/hocs/test/with-product.js → assets/js/hocs/test/with-product.jsx
diff --git a/...ts/js/hocs/test/with-searched-products.js → ...s/js/hocs/test/with-searched-products.jsx b/...ts/js/hocs/test/with-searched-products.js → ...s/js/hocs/test/with-searched-products.jsx
diff --git a/bin/webpack-configs.js b/bin/webpack-configs.js
@@ -8,7 +8,7 @@ const RemoveFilesPlugin = require( './remove-files-webpack-plugin' );
 const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
 const ProgressBarPlugin = require( 'progress-bar-webpack-plugin' );
 const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
-const WebpackRTLPlugin = require( 'webpack-rtl-plugin' );
+const WebpackRTLPlugin = require( './webpack-rtl-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 const CreateFileWebpack = require( 'create-file-webpack' );
 const CircularDependencyPlugin = require( 'circular-dependency-plugin' );
@@ -25,8 +25,8 @@ const {
 	CHECK_CIRCULAR_DEPS,
 	requestToExternal,
 	requestToHandle,
-	findModuleMatch,
 	getProgressBarPluginConfig,
+	getCacheGroups,
 } = require( './webpack-helpers' );
 
 const isProduction = NODE_ENV === 'production';
@@ -84,18 +84,15 @@ const getCoreConfig = ( options = {} ) => {
 			path: path.resolve( __dirname, '../build/' ),
 			library: [ 'wc', '[name]' ],
 			libraryTarget: 'this',
-			// This fixes an issue with multiple webpack projects using chunking
-			// overwriting each other's chunk loader function.
-			// See https://webpack.js.org/configuration/output/#outputjsonpfunction
-			jsonpFunction: 'webpackWcBlocksJsonp',
+			uniqueName: 'webpackWcBlocksJsonp',
 		},
 		module: {
 			rules: [
 				{
 					test: /\.(t|j)sx?$/,
 					exclude: /node_modules/,
 					use: {
-						loader: 'babel-loader?cacheDirectory',
+						loader: 'babel-loader',
 						options: {
 							presets: [ '@wordpress/babel-preset-default' ],
 							plugins: [
@@ -133,10 +130,12 @@ woocommerce_blocks_env = ${ NODE_ENV }
 				isProduction && ! process.env.WP_BUNDLE_ANALYZER,
 			splitChunks: {
 				automaticNameDelimiter: '--',
+				cacheGroups: {
+					...getCacheGroups(),
+				},
 			},
 			minimizer: [
 				new TerserPlugin( {
-					cache: true,
 					parallel: true,
 					terserOptions: {
 						output: {
@@ -193,20 +192,15 @@ const getMainConfig = ( options = {} ) => {
 			filename: `[name]${ fileSuffix }.js`,
 			library: [ 'wc', 'blocks', '[name]' ],
 			libraryTarget: 'this',
-			// This fixes an issue with multiple webpack projects using chunking
-			// overwriting each other's chunk loader function.
-			// See https://webpack.js.org/configuration/output/#outputjsonpfunction
-			// This can be removed when moving to webpack 5:
-			// https://webpack.js.org/blog/2020-10-10-webpack-5-release/#automatic-unique-naming
-			jsonpFunction: 'webpackWcBlocksJsonp',
+			uniqueName: 'webpackWcBlocksJsonp',
 		},
 		module: {
 			rules: [
 				{
 					test: /\.(j|t)sx?$/,
 					exclude: /node_modules/,
 					use: {
-						loader: 'babel-loader?cacheDirectory',
+						loader: 'babel-loader',
 						options: {
 							presets: [ '@wordpress/babel-preset-default' ],
 							plugins: [
@@ -218,6 +212,7 @@ const getMainConfig = ( options = {} ) => {
 								'@babel/plugin-proposal-optional-chaining',
 								'@babel/plugin-proposal-class-properties',
 							].filter( Boolean ),
+							cacheDirectory: true,
 						},
 					},
 				},
@@ -233,7 +228,7 @@ const getMainConfig = ( options = {} ) => {
 			concatenateModules:
 				isProduction && ! process.env.WP_BUNDLE_ANALYZER,
 			splitChunks: {
-				minSize: 0,
+				minSize: 200000,
 				automaticNameDelimiter: '--',
 				cacheGroups: {
 					commons: {
@@ -242,11 +237,11 @@ const getMainConfig = ( options = {} ) => {
 						chunks: 'all',
 						enforce: true,
 					},
+					...getCacheGroups(),
 				},
 			},
 			minimizer: [
 				new TerserPlugin( {
-					cache: true,
 					parallel: true,
 					terserOptions: {
 						output: {
@@ -329,20 +324,15 @@ const getFrontConfig = ( options = {} ) => {
 			// @see https://github.com/Automattic/jetpack/pull/20926
 			chunkFilename: `[name]-frontend${ fileSuffix }.js?ver=[contenthash]`,
 			filename: `[name]-frontend${ fileSuffix }.js`,
-			// This fixes an issue with multiple webpack projects using chunking
-			// overwriting each other's chunk loader function.
-			// See https://webpack.js.org/configuration/output/#outputjsonpfunction
-			// This can be removed when moving to webpack 5:
-			// https://webpack.js.org/blog/2020-10-10-webpack-5-release/#automatic-unique-naming
-			jsonpFunction: 'webpackWcBlocksJsonp',
+			uniqueName: 'webpackWcBlocksJsonp',
 		},
 		module: {
 			rules: [
 				{
 					test: /\.(j|t)sx?$/,
 					exclude: /node_modules/,
 					use: {
-						loader: 'babel-loader?cacheDirectory',
+						loader: 'babel-loader',
 						options: {
 							presets: [
 								[
@@ -366,6 +356,7 @@ const getFrontConfig = ( options = {} ) => {
 								'@babel/plugin-proposal-optional-chaining',
 								'@babel/plugin-proposal-class-properties',
 							].filter( Boolean ),
+							cacheDirectory: true,
 						},
 					},
 				},
@@ -381,11 +372,27 @@ const getFrontConfig = ( options = {} ) => {
 			concatenateModules:
 				isProduction && ! process.env.WP_BUNDLE_ANALYZER,
 			splitChunks: {
+				minSize: 200000,
 				automaticNameDelimiter: '--',
+				cacheGroups: {
+					...getCacheGroups(),
+					'base-components': {
+						test: /\/assets\/js\/base\/components\//,
+						name( module, chunks, cacheGroupKey ) {
+							const moduleFileName = module
+								.identifier()
+								.split( '/' )
+								.reduceRight( ( item ) => item );
+							const allChunksNames = chunks
+								.map( ( item ) => item.name )
+								.join( '~' );
+							return `${ cacheGroupKey }-${ allChunksNames }-${ moduleFileName }`;
+						},
+					},
+				},
 			},
 			minimizer: [
 				new TerserPlugin( {
-					cache: true,
 					parallel: true,
 					terserOptions: {
 						output: {
@@ -434,18 +441,15 @@ const getPaymentsConfig = ( options = {} ) => {
 			devtoolNamespace: 'wc',
 			path: path.resolve( __dirname, '../build/' ),
 			filename: `[name].js`,
-			// This fixes an issue with multiple webpack projects using chunking
-			// overwriting each other's chunk loader function.
-			// See https://webpack.js.org/configuration/output/#outputjsonpfunction
-			jsonpFunction: 'webpackWcBlocksPaymentMethodExtensionJsonp',
+			uniqueName: 'webpackWcBlocksPaymentMethodExtensionJsonp',
 		},
 		module: {
 			rules: [
 				{
 					test: /\.(j|t)sx?$/,
 					exclude: /node_modules/,
 					use: {
-						loader: 'babel-loader?cacheDirectory',
+						loader: 'babel-loader',
 						options: {
 							presets: [
 								[
@@ -469,6 +473,7 @@ const getPaymentsConfig = ( options = {} ) => {
 								'@babel/plugin-proposal-optional-chaining',
 								'@babel/plugin-proposal-class-properties',
 							].filter( Boolean ),
+							cacheDirectory: true,
 						},
 					},
 				},
@@ -485,10 +490,12 @@ const getPaymentsConfig = ( options = {} ) => {
 				isProduction && ! process.env.WP_BUNDLE_ANALYZER,
 			splitChunks: {
 				automaticNameDelimiter: '--',
+				cacheGroups: {
+					...getCacheGroups(),
+				},
 			},
 			minimizer: [
 				new TerserPlugin( {
-					cache: true,
 					parallel: true,
 					terserOptions: {
 						output: {
@@ -541,15 +548,15 @@ const getExtensionsConfig = ( options = {} ) => {
 			devtoolNamespace: 'wc',
 			path: path.resolve( __dirname, '../build/' ),
 			filename: `[name].js`,
-			jsonpFunction: 'webpackWcBlocksExtensionsMethodExtensionJsonp',
+			uniqueName: 'webpackWcBlocksExtensionsMethodExtensionJsonp',
 		},
 		module: {
 			rules: [
 				{
 					test: /\.(j|t)sx?$/,
 					exclude: /node_modules/,
 					use: {
-						loader: 'babel-loader?cacheDirectory',
+						loader: 'babel-loader',
 						options: {
 							presets: [
 								[
@@ -573,6 +580,7 @@ const getExtensionsConfig = ( options = {} ) => {
 								'@babel/plugin-proposal-optional-chaining',
 								'@babel/plugin-proposal-class-properties',
 							].filter( Boolean ),
+							cacheDirectory: true,
 						},
 					},
 				},
@@ -589,10 +597,12 @@ const getExtensionsConfig = ( options = {} ) => {
 				isProduction && ! process.env.WP_BUNDLE_ANALYZER,
 			splitChunks: {
 				automaticNameDelimiter: '--',
+				cacheGroups: {
+					...getCacheGroups(),
+				},
 			},
 			minimizer: [
 				new TerserPlugin( {
-					cache: true,
 					parallel: true,
 					terserOptions: {
 						output: {
@@ -645,7 +655,7 @@ const getSiteEditorConfig = ( options = {} ) => {
 			devtoolNamespace: 'wc',
 			path: path.resolve( __dirname, '../build/' ),
 			filename: `[name].js`,
-			jsonpFunction: 'webpackWcBlocksExtensionsMethodExtensionJsonp',
+			chunkLoadingGlobal: 'webpackWcBlocksExtensionsMethodExtensionJsonp',
 		},
 		module: {
 			rules: [
@@ -692,10 +702,12 @@ const getSiteEditorConfig = ( options = {} ) => {
 				isProduction && ! process.env.WP_BUNDLE_ANALYZER,
 			splitChunks: {
 				automaticNameDelimiter: '--',
+				cacheGroups: {
+					...getCacheGroups(),
+				},
 			},
 			minimizer: [
 				new TerserPlugin( {
-					cache: true,
 					parallel: true,
 					terserOptions: {
 						output: {
@@ -752,29 +764,54 @@ const getStylingConfig = ( options = {} ) => {
 			filename: `[name]-style${ fileSuffix }.js`,
 			library: [ 'wc', 'blocks', '[name]' ],
 			libraryTarget: 'this',
-			// This fixes an issue with multiple webpack projects using chunking
-			// overwriting each other's chunk loader function.
-			// See https://webpack.js.org/configuration/output/#outputjsonpfunction
-			jsonpFunction: 'webpackWcBlocksJsonp',
+			uniqueName: 'webpackWcBlocksJsonp',
 		},
 		optimization: {
 			splitChunks: {
-				minSize: 0,
 				automaticNameDelimiter: '--',
 				cacheGroups: {
 					editorStyle: {
 						// Capture all `editor` stylesheets and editor-components stylesheets.
-						test: ( module = {} ) =>
-							module.constructor.name === 'CssModule' &&
-							( findModuleMatch( module, /editor\.scss$/ ) ||
-								findModuleMatch(
-									module,
-									/[\\/]assets[\\/]js[\\/]editor-components[\\/]/
-								) ),
+						test: ( module = {}, { moduleGraph } ) => {
+							if ( ! module.type.includes( 'css' ) ) {
+								return false;
+							}
+
+							const moduleIssuer =
+								moduleGraph.getIssuer( module );
+							if ( ! moduleIssuer ) {
+								return false;
+							}
+
+							return (
+								moduleIssuer.resource.endsWith(
+									'editor.scss'
+								) ||
+								moduleIssuer.resource.includes(
+									`${ path.sep }assets${ path.sep }js${ path.sep }editor-components${ path.sep }`
+								)
+							);
+						},
 						name: 'wc-blocks-editor-style',
 						chunks: 'all',
 						priority: 10,
 					},
+					...getCacheGroups(),
+					'base-components': {
+						test: /\/assets\/js\/base\/components\//,
+						name( module, chunks, cacheGroupKey ) {
+							const moduleFileName = module
+								.identifier()
+								.split( '/' )
+								.reduceRight( ( item ) => item )
+								.split( '|' )
+								.reduce( ( item ) => item );
+							const allChunksNames = chunks
+								.map( ( item ) => item.name )
+								.join( '~' );
+							return `${ cacheGroupKey }-${ allChunksNames }-${ moduleFileName }`;
+						},
+					},
 				},
 			},
 		},
@@ -850,15 +887,12 @@ const getStylingConfig = ( options = {} ) => {
 		plugins: [
 			...getSharedPlugins( { bundleAnalyzerReportTitle: 'Styles' } ),
 			new ProgressBarPlugin( getProgressBarPluginConfig( 'Styles' ) ),
-			new WebpackRTLPlugin( {
-				filename: `[name]${ fileSuffix }-rtl.css`,
-				minify: {
-					safe: true,
-				},
-			} ),
 			new MiniCssExtractPlugin( {
 				filename: `[name]${ fileSuffix }.css`,
 			} ),
+			new WebpackRTLPlugin( {
+				filenameSuffix: '-rtl.css',
+			} ),
 			// Remove JS files generated by MiniCssExtractPlugin.
 			new RemoveFilesPlugin( `./build/*style${ fileSuffix }.js` ),
 		],
@@ -880,10 +914,7 @@ const getInteractivityAPIConfig = ( options = {} ) => {
 			path: path.resolve( __dirname, '../build/' ),
 			library: [ 'wc', '__experimentalInteractivity' ],
 			libraryTarget: 'this',
-			// This fixes an issue with multiple webpack projects using chunking
-			// overwriting each other's chunk loader function.
-			// See https://webpack.js.org/configuration/output/#outputjsonpfunction
-			jsonpFunction: 'webpackWcBlocksJsonp',
+			chunkLoadingGlobal: 'webpackWcBlocksJsonp',
 		},
 		resolve: {
 			alias,