Update webpack 4 to webpack 5 (https://github.com/woocommerce/woocommerce-admin/pull/8476)

* updated webpack to 5

* fix dependency extraction config

* port unminify.js to webpack 5

* updated packages webpack version

* changelogs

* Updated @wordpress/custom-templated-path-webpack-plugin

- also removed Terser from package.json

* Upgraded storybook config to webpack 5

plugins/woocommerce-admin/changelogs/dev-webpack5

@@ -0,0 +1,4 @@
+Significance: minor
+Type: Dev
+
+Update webpack 4 to 5 #8476

plugins/woocommerce-admin/package.json

@@ -146,7 +146,6 @@
 	},
 	"devDependencies": {
 		"@automattic/color-studio": "^2.5.0",
-		"@automattic/mini-css-extract-plugin-with-rtl": "^0.8.0",
 		"@babel/cli": "^7.17.6",
 		"@babel/core": "^7.17.5",
 		"@babel/plugin-proposal-class-properties": "^7.16.7",
@@ -168,8 +167,10 @@
 		"@storybook/addon-viewport": "^6.4.19",
 		"@storybook/addons": "^6.4.19",
 		"@storybook/api": "^6.4.19",
+		"@storybook/builder-webpack5": "^6.4.19",
 		"@storybook/components": "^6.4.19",
 		"@storybook/core-events": "^6.4.19",
+		"@storybook/manager-webpack5": "^6.4.19",
 		"@storybook/react": "^6.4.19",
 		"@storybook/theming": "^6.4.19",
 		"@testing-library/dom": "^8.11.3",
@@ -212,7 +213,7 @@
 		"@wordpress/babel-plugin-makepot": "^2.1.3",
 		"@wordpress/babel-preset-default": "^6.5.1",
 		"@wordpress/browserslist-config": "^4.1.1",
-		"@wordpress/custom-templated-path-webpack-plugin": "^1.7.0",
+		"@wordpress/custom-templated-path-webpack-plugin": "^2.1.2",
 		"@wordpress/e2e-test-utils": "^4.16.1",
 		"@wordpress/eslint-plugin": "^8.0.2",
 		"@wordpress/jest-preset-default": "^8.0.1",
@@ -230,9 +231,9 @@
 		"comment-parser": "^1.3.0",
 		"concurrently": "^5.3.0",
 		"config": "^3.3.7",
-		"copy-webpack-plugin": "^5.1.2",
+		"copy-webpack-plugin": "^10.2.4",
 		"cross-env": "^7.0.3",
-		"css-loader": "^3.6.0",
+		"css-loader": "^6.7.0",
 		"docsify-cli": "^4.4.3",
 		"eslint": "^7.32.0",
 		"eslint-import-resolver-typescript": "^2.5.0",
@@ -251,6 +252,7 @@
 		"lint-staged": "^10.5.4",
 		"md5": "^2.3.0",
 		"merge-config": "^2.0.0",
+		"mini-css-extract-plugin": "^2.6.0",
 		"moment": "^2.29.1",
 		"moment-timezone": "^0.5.34",
 		"moment-timezone-data-webpack-plugin": "^1.5.0",
@@ -272,14 +274,14 @@
 		"style-loader": "^0.23.1",
 		"stylelint": "^9.10.1",
 		"stylelint-config-wordpress": "^13.1.0",
-		"terser-webpack-plugin": "^2.3.8",
 		"ts-jest": "^27.1.3",
 		"typescript": "^4.6.2",
 		"url-loader": "^1.1.2",
-		"webpack": "^4.46.0",
+		"webpack": "^5.70.0",
 		"webpack-bundle-analyzer": "^3.9.0",
-		"webpack-cli": "^3.3.12",
+		"webpack-cli": "^4.9.2",
 		"webpack-fix-style-only-entries": "^0.6.1",
+		"webpack-merge": "^5.8.0",
 		"webpack-rtl-plugin": "^2.0.0"
 	},
 	"engines": {

plugins/woocommerce-admin/packages/components/package.json

@@ -104,7 +104,7 @@
 		"sass-loader": "^10.2.1",
 		"ts-jest": "^27.1.3",
 		"typescript": "^4.6.2",
-		"webpack": "^4.46.0",
+		"webpack": "^5.70.0",
 		"webpack-cli": "^3.3.12"
 	},
 	"scripts": {

plugins/woocommerce-admin/packages/customer-effort-score/package.json

@@ -50,7 +50,7 @@
 		"sass-loader": "^10.2.1",
 		"ts-jest": "^27.1.3",
 		"typescript": "^4.6.2",
-		"webpack": "^4.46.0",
+		"webpack": "^5.70.0",
 		"webpack-cli": "^3.3.12"
 	},
 	"peerDependencies": {

plugins/woocommerce-admin/packages/dependency-extraction-webpack-plugin/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 -   Update all js packages with minor/patch version changes. #8392
 
+## Breaking changes
+    -   Updated to webpack 5 compatible #8476
+    -   Will need to change webpack config output.libraryTarget from 'this' to 'window' #8476
+
 # 1.6.0
 
 -   Add new `bundledPackages` option to bundle in specific packages.

plugins/woocommerce-admin/packages/dependency-extraction-webpack-plugin/package.json

@@ -18,7 +18,7 @@
 	},
 	"main": "src/index.js",
 	"dependencies": {
-		"@wordpress/dependency-extraction-webpack-plugin": "^2.9.0"
+		"@wordpress/dependency-extraction-webpack-plugin": "^3.3.0"
 	},
 	"publishConfig": {
 		"access": "public"
@@ -30,7 +30,7 @@
 		"rimraf": "^3.0.2",
 		"ts-jest": "^27.1.3",
 		"typescript": "^4.6.2",
-		"webpack": "^4.46.0",
+		"webpack": "^5.70.0",
 		"webpack-cli": "^3.3.12"
 	}
 }

plugins/woocommerce-admin/packages/experimental/package.json

@@ -63,7 +63,7 @@
 		"sass-loader": "^10.2.1",
 		"ts-jest": "^27.1.3",
 		"typescript": "^4.6.2",
-		"webpack": "^4.46.0",
+		"webpack": "^5.70.0",
 		"webpack-cli": "^3.3.12"
 	},
 	"peerDependencies": {

plugins/woocommerce-admin/packages/onboarding/package.json

@@ -46,7 +46,7 @@
 		"sass-loader": "^10.2.1",
 		"ts-jest": "^27.1.3",
 		"typescript": "^4.6.2",
-		"webpack": "^4.46.0",
+		"webpack": "^5.70.0",
 		"webpack-cli": "^3.3.12"
 	},
 	"scripts": {

plugins/woocommerce-admin/packages/style-build/index.js

@@ -1,10 +1,10 @@
 /**
  * External dependencies
  */
-const MiniCssExtractPlugin = require( '@automattic/mini-css-extract-plugin-with-rtl' );
+const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
 const path = require( 'path' );
 const WebpackRTLPlugin = require( 'webpack-rtl-plugin' );
-const FixStyleOnlyEntriesPlugin = require( 'webpack-fix-style-only-entries' );
+const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
 const postcssPlugins = require( '@wordpress/postcss-plugins-preset' );
 
 const NODE_ENV = process.env.NODE_ENV || 'development';
@@ -46,7 +46,7 @@ module.exports = {
 			},
 		],
 		plugins: [
-			new FixStyleOnlyEntriesPlugin(),
+			new RemoveEmptyScriptsPlugin(),
 			new MiniCssExtractPlugin( {
 				filename: '[name]/style.css',
 				chunkFilename: 'chunks/[id].style.css',

plugins/woocommerce-admin/packages/style-build/package.json

@@ -19,13 +19,13 @@
 	"main": "src/index.js",
 	"dependencies": {
 		"@automattic/color-studio": "^2.5.0",
-		"@automattic/mini-css-extract-plugin-with-rtl": "^0.8.0",
 		"@wordpress/base-styles": "^3.6.0",
 		"@wordpress/postcss-plugins-preset": "^1.6.0",
 		"css-loader": "^3.6.0",
 		"postcss-loader": "^3.0.0",
 		"sass-loader": "^10.2.1",
-		"webpack-fix-style-only-entries": "^0.6.1",
+		"webpack-remove-empty-scripts": "^0.7.3",
+		"mini-css-extract-plugin": "^2.6.0",
 		"webpack-rtl-plugin": "^2.0.0"
 	},
 	"private": true,
@@ -36,6 +36,6 @@
 		"rimraf": "^3.0.2",
 		"ts-jest": "^27.1.3",
 		"typescript": "^4.6.2",
-		"webpack": "^4.46.0"
+		"webpack": "^5.70.0"
 	}
 }

plugins/woocommerce-admin/storybook/.storybook/main.js

@@ -1,6 +1,9 @@
 const webpackOverride = require( '../webpack.config' );
 
 module.exports = {
+	core: {
+		builder: 'webpack5',
+	},
 	stories: [
 		// WooCommerce Admin / @woocommerce/components components
 		'../../packages/components/src/**/stories/*.@(js|tsx)',

plugins/woocommerce-admin/storybook/webpack.config.js

@@ -44,28 +44,28 @@ module.exports = ( storybookConfig ) => {
 
 	storybookConfig.plugins.push(
 		...wcAdminWebpackConfig.plugins,
-		new CopyWebpackPlugin( [
+		new CopyWebpackPlugin( {
-			{
+			patterns: [
-				from: path.resolve( __dirname, 'wordpress/css' ),
+				{
-				to: 'wordpress/css',
+					from: path.resolve( __dirname, 'wordpress/css' ),
-			},
+					to: 'wordpress/css/[name][ext]',
-			{
+				},
-				from: path.resolve(
+				{
-					__dirname,
+					from: path.resolve(
-					`../packages/components/build-style/*.css`
+						__dirname,
-				),
+						`../packages/components/build-style/*.css`
-				to: `./component-css`,
+					),
-				flatten: true,
+					to: `./component-css/[name][ext]`,
-			},
+				},
-			{
+				{
-				from: path.resolve(
+					from: path.resolve(
-					__dirname,
+						__dirname,
-					`../packages/experimental/build-style/*.css`
+						`../packages/experimental/build-style/*.css`
-				),
+					),
-				to: `./experimental-css`,
+					to: `./experimental-css/[name][ext]`,
-				flatten: true,
+				},
-			},
+			],
-		] )
+		} )
 	);
 
 	return storybookConfig;

plugins/woocommerce-admin/unminify.js

@@ -8,19 +8,20 @@
  * 2. Remove check for development mode - we always want unminified files.
  * 3. Remove BannerPlugin support - we don't use it.
  * 4. Remove the 'min' suffix from the chunk loaded in the new `mainEntry` option.
- * 5. Hook into compilation later so we're running after Source Map generation.
+ * 5. Hook into compilation later so we're running after Source Map generation. (https://webpack.js.org/api/compilation-hooks/: PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE) 
  */
 const path = require( 'path' );
 const ModuleFilenameHelpers = require( 'webpack/lib/ModuleFilenameHelpers' );
+const webpack = require( 'webpack' );
 
 const getFileName = ( name, ext, opts ) => {
-	if ( name.match(/([-_.]min)[-_.]/ ) ) {
+	if ( name.match( /([-_.]min)[-_.]/ ) ) {
 		return name.replace( /[-_.]min/, '' );
 	}
 
 	const suffix = ( opts.postfix || 'nomin' ) + '.' + ext;
-	if ( name.match( new RegExp( '\.' + ext + '$' ) ) ) {
+	if ( name.match( new RegExp( '.' + ext + '$' ) ) ) {
-		return name.replace( new RegExp( ext + '$' ), suffix )
+		return name.replace( new RegExp( ext + '$' ), suffix );
 	}
 
 	return name + suffix;
@@ -37,44 +38,80 @@ class UnminifyWebpackPlugin {
 	}
 
 	apply( compiler ) {
-		// Hook after asset optimization if we're using a devtool (source map).
+		const options = this.options;
-		// @todo: Update to afterFinishAssets for Webpack 5.x?
+		const outputNormal = {};
-		const compilationHook = compiler.options.devtool ? 'afterOptimizeAssets' : 'additionalAssets';
 
-		compiler.hooks.compilation.tap( 'UnminifyWebpackPlugin', ( compilation ) => {
+		compiler.hooks.compilation.tap(
-			compilation.hooks[ compilationHook ].tap( 'UnminifyWebpackPlugin', () => {
+			'UnminifyWebpackPlugin',
-				const files = [
+			( compilation ) => {
-					...compilation.additionalChunkAssets
+				compilation.hooks.processAssets.tap(
-				];
+					{
-	
+						name: 'UnminifyWebpackPlugin',
-				compilation.chunks.forEach( chunk => files.push( ...chunk.files ) );
+						stage: webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE,
+					},
+					( assets ) => {
+						Object.entries( assets ).forEach(
+							( [ pathname, source ] ) => {
+								if (
+									! ModuleFilenameHelpers.matchObject(
+										options,
+										pathname
+									)
+								) {
+									return;
+								}
 
-				const finalFiles = files.filter( ModuleFilenameHelpers.matchObject.bind( null, this.options ) );
+								let sourceCode = source.source();
+								if (
+									options.mainEntry &&
+									pathname === options.mainEntry
+								) {
+									sourceCode = sourceCode.replace(
+										/ \+ "\.min\.js"$/m,
+										' + ".js"'
+									);
+								}
 
-				finalFiles.forEach( ( minified ) => {
+								const dest = compiler.options.output.path;
-					const asset = compilation.assets[ minified ];
+								const outputPath = path.resolve(
-					let source = asset.source();
+									dest,
-					const ext = path.extname( minified ).substr( 1 );
+									getFileName(
-					const unminified = getFileName( minified, ext, this.options );
+										pathname,
-	
+										path.extname( pathname ).substr( 1 ),
-					// Remove the ".min" suffix from the lazy loaded chunk filenames.
+										options
-					if ( this.options.mainEntry && minified === this.options.mainEntry ) {
+									)
-						// See: https://github.com/webpack/webpack/blob/v4.43.0/lib/web/JsonpMainTemplatePlugin.js#L129
+								);
-						// NOTE: This will break with Webpack 5.x!
+
-						source = source.replace( / \+ "\.min\.js"$/m, ' + ".js"' );
+								outputNormal[ outputPath ] = {
+									filename: getFileName(
+										pathname,
+										path.extname( pathname ).substr( 1 ),
+										options
+									),
+									content: sourceCode,
+									size: Buffer.from( sourceCode, 'utf-8' )
+										.length,
+								};
+							}
+						);
 					}
-	
+				);
-					compilation.assets[ unminified ] = {
+
-						source: () => {
+				compilation.hooks.afterProcessAssets.tap(
-							return source;
+					'UnminifiedWebpackPlugin',
-						},
+					() => {
-						size: () => {
+						for ( const [ key, value ] of Object.entries(
-							return source.length;
+							outputNormal
+						) ) {
+							compilation.emitAsset(
+								value.filename,
+								new webpack.sources.RawSource( value.content )
+							);
 						}
-					};
+					}
-				} );
+				);
-			} );
+			}
-		} );
+		);
 	}
 }
 

plugins/woocommerce-admin/webpack.config.js

@@ -8,7 +8,6 @@ const CustomTemplatedPathPlugin = require( '@wordpress/custom-templated-path-web
 const BundleAnalyzerPlugin = require( 'webpack-bundle-analyzer' )
 	.BundleAnalyzerPlugin;
 const MomentTimezoneDataPlugin = require( 'moment-timezone-data-webpack-plugin' );
-const TerserPlugin = require( 'terser-webpack-plugin' );
 const ForkTsCheckerWebpackPlugin = require( 'fork-ts-checker-webpack-plugin' );
 
 /**
@@ -75,12 +74,13 @@ const webpackConfig = {
 		chunkFilename: `chunks/[name]${ suffix }.js`,
 		path: path.join( __dirname, 'dist' ),
 		library: [ 'wc', '[modulename]' ],
-		libraryTarget: 'this',
+		libraryTarget: 'window',
-		jsonpFunction: '__wcAdmin_webpackJsonp',
+		uniqueName: '__wcAdmin_webpackJsonp',
 	},
 	module: {
 		rules: [
 			{
+				test: /\.js$/,
 				parser: {
 					amd: false,
 				},
@@ -119,6 +119,9 @@ const webpackConfig = {
 		],
 	},
 	resolve: {
+		fallback:{
+			'crypto': 'empty'
+		},
 		extensions: [ '.json', '.js', '.jsx', '.ts', '.tsx' ],
 		alias: {
 			'~': path.resolve( __dirname + '/client' ),
@@ -142,13 +145,14 @@ const webpackConfig = {
 				return outputPath;
 			},
 		} ),
-		new CopyWebpackPlugin(
+		new CopyWebpackPlugin({
-			wcAdminPackages.map( ( packageName ) => ( {
+
+			patterns: wcAdminPackages.map( ( packageName ) => ( {
 				from: `./packages/${ packageName }/build-style/*.css`,
-				to: `./${ packageName }/`,
+				to: `./${ packageName }/[name][ext]`,
-				flatten: true,
+				noErrorOnMissing: true
-				transform: ( content ) => content,
 			} ) )
+		}
 		),
 
 		// We reuse this Webpack setup for Storybook, where we need to disable dependency extraction.
@@ -169,13 +173,9 @@ const webpackConfig = {
 	].filter( Boolean ),
 	optimization: {
 		minimize: NODE_ENV !== 'development',
-		minimizer: [ new TerserPlugin() ],
 		splitChunks: {
-			name: false,
+			name: false
-		},
+		}
-	},
-	node: {
-		crypto: 'empty',
 	},
 };