Build: Update webpack to v5.x

Update webpack version to latest version https://www.npmjs.com/package/webpack. This aligns closer with how the Gutenberg plugin handles WordPress packages. Related update in Gutenberg from August 2021: WordPress/gutenberg#33818.

Props walbo, desrosj, mukesh27.
Fixes #51750.




git-svn-id: https://develop.svn.wordpress.org/trunk@53135 602fd350-edb4-49c9-b593-d223f7449a82

package.json

@@ -24,16 +24,14 @@
 		"last 2 Opera versions"
 	],
 	"devDependencies": {
-		"@wordpress/babel-preset-default": "6.4.1",
-		"@wordpress/custom-templated-path-webpack-plugin": "2.1.0",
-		"@wordpress/dependency-extraction-webpack-plugin": "3.2.1",
+		"@wordpress/babel-preset-default": "6.8.0",
+		"@wordpress/dependency-extraction-webpack-plugin": "3.4.1",
 		"@wordpress/e2e-test-utils": "5.4.10",
-		"@wordpress/library-export-default-webpack-plugin": "2.2.0",
-		"@wordpress/scripts": "19.2.4",
+		"@wordpress/scripts": "22.4.0",
 		"autoprefixer": "^9.8.8",
 		"chalk": "4.1.2",
 		"check-node-version": "4.2.1",
-		"copy-webpack-plugin": "^5.1.2",
+		"copy-webpack-plugin": "10.2.4",
 		"cssnano": "4.1.11",
 		"dotenv": "16.0.0",
 		"dotenv-expand": "8.0.3",
@@ -57,7 +55,7 @@
 		"grunt-replace-lts": "~1.1.0",
 		"grunt-rtlcss": "~2.0.2",
 		"grunt-sass": "~3.1.0",
-		"grunt-webpack": "^4.0.3",
+		"grunt-webpack": "5.0.0",
 		"ink-docstrap": "1.3.2",
 		"install-changed": "1.1.0",
 		"jest-image-snapshot": "3.0.1",
@@ -67,14 +65,13 @@
 		"sass": "^1.50.0",
 		"sinon": "~13.0.1",
 		"sinon-test": "~3.1.3",
-		"source-map-loader": "^1.1.3",
+		"source-map-loader": "3.0.1",
+		"terser-webpack-plugin": "5.3.1",
 		"uglify-js": "^3.15.3",
-		"uglifyjs-webpack-plugin": "2.2.0",
 		"uuid": "8.3.2",
 		"wait-on": "6.0.1",
-		"webpack": "4.43.0",
-		"webpack-dev-server": "3.11.2",
-		"webpack-livereload-plugin": "2.3.0"
+		"webpack": "5.72.0",
+		"webpack-livereload-plugin": "3.0.2"
 	},
 	"dependencies": {
 		"@wordpress/a11y": "3.2.4",

src/wp-includes/blocks/file/view.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '499eaf2efb98327a07f222e92d742380');
+<?php return array('dependencies' => array(), 'version' => '9a1dbe2fc8e62a7e82dd0d30439951b3');

src/wp-includes/blocks/file/view.min.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'e8d668b8e69d9bf1c99dc250d92f2b72');
+<?php return array('dependencies' => array(), 'version' => 'c7ee2db603af4ed37bd6b1d2bb4a51bf');

src/wp-includes/blocks/navigation/view.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '49bd3949750c5172758e1b3058f0c72a');
+<?php return array('dependencies' => array(), 'version' => '3bc2957a58e1f08fa9309e91ffeef792');

src/wp-includes/blocks/navigation/view.min.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '3776ea67846b3bb10fe8f7cdd486b0ba');
+<?php return array('dependencies' => array(), 'version' => '009e29110e016c14bac4ba0ecc809fcd');

tools/webpack/blocks.js

@@ -3,18 +3,17 @@
  */
 const { DefinePlugin } = require( 'webpack' );
 const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
-const postcss = require( 'postcss' );
-const UglifyJS = require( 'uglify-js' );
-
-const { join, basename } = require( 'path' );
-const { get } = require( 'lodash' );
+const { join } = require( 'path' );
 
 /**
  * WordPress dependencies
  */
 const DependencyExtractionPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
 
-const baseDir = join( __dirname, '../../' );
+/**
+ * Internal dependencies
+ */
+const { stylesTransform, baseConfig, baseDir } = require( './shared' );
 
 module.exports = function( env = { environment: 'production', watch: false, buildTarget: false } ) {
 	const mode = env.environment;
@@ -125,32 +124,13 @@ module.exports = function( env = { environment: 'production', watch: false, buil
 
 	const blockStylesheetCopies = blockFolders.map( ( blockName ) => ( {
 		from: join( baseDir, `node_modules/@wordpress/block-library/build-style/${ blockName }/*.css` ),
-		to: join( baseDir, `${ buildTarget }/blocks/${ blockName }/` ),
-		flatten: true,
-		transform: ( content ) => {
-			if ( mode === 'production' ) {
-				return postcss( [
-					require( 'cssnano' )( {
-						preset: 'default',
-					} ),
-				] )
-					.process( content, { from: 'src/app.css', to: 'dest/app.css' } )
-					.then( ( result ) => result.css );
-			}
-
-			return content;
-		},
-		transformPath: ( targetPath, sourcePath ) => {
-			if ( mode === 'production' ) {
-				return targetPath.replace( /\.css$/, '.min.css' );
-			}
-
-			return targetPath;
-		}
+		to: join( baseDir, `${ buildTarget }/blocks/${ blockName }/[name]${ suffix }.css` ),
+		transform: stylesTransform( mode ),
+		noErrorOnMissing: true,
 	} ) );
 
 	const config = {
-		mode,
+		...baseConfig( env ),
 		entry: {
 			'file/view': join( baseDir, `node_modules/@wordpress/block-library/build-module/file/view` ),
 			'navigation/view': join( baseDir, `node_modules/@wordpress/block-library/build-module/navigation/view` ),
@@ -160,27 +140,6 @@ module.exports = function( env = { environment: 'production', watch: false, buil
 			filename: `[name]${ suffix }.js`,
 			path: join( baseDir, `${ buildTarget }/blocks` ),
 		},
-		resolve: {
-			modules: [
-				baseDir,
-				'node_modules',
-			],
-			alias: {
-				'lodash-es': 'lodash',
-			},
-		},
-		module: {
-			rules: [
-				{
-					test: /\.js$/,
-					use: [ 'source-map-loader' ],
-					enforce: 'pre',
-				},
-			],
-		},
-		optimization: {
-			moduleIds: mode === 'production' ? 'hashed' : 'named',
-		},
 		plugins: [
 			new DefinePlugin( {
 				// Inject the `GUTENBERG_PHASE` global, used for feature flagging.
@@ -192,33 +151,15 @@ module.exports = function( env = { environment: 'production', watch: false, buil
 			new DependencyExtractionPlugin( {
 				injectPolyfill: false,
 			} ),
-			new CopyWebpackPlugin(
-				[
+			new CopyWebpackPlugin( {
+				patterns: [
 					...blockPHPCopies,
 					...blockMetadataCopies,
 					...blockStylesheetCopies,
 				],
-			),
+			} ),
 		],
-		stats: {
-			children: false,
-		},
-
-		watch: env.watch,
 	};
 
-	if ( config.mode !== 'production' ) {
-		config.devtool = process.env.SOURCEMAP || 'source-map';
-	}
-
-	if ( mode === 'development' && env.buildTarget === 'build/' ) {
-		delete config.devtool;
-		config.mode = 'production';
-		config.optimization = {
-			minimize: false,
-			moduleIds: 'hashed',
-		};
-	}
-
 	return config;
 };

tools/webpack/media.js

@@ -1,12 +1,15 @@
-const UglifyJsPlugin = require( 'uglifyjs-webpack-plugin' );
+/**
+ * External dependencies
+ */
+const TerserPlugin = require( 'terser-webpack-plugin' );
 
-var path            = require( 'path' ),
-	admin_files     = {};
-
-const baseDir = path.join( __dirname, '../../' );
+/**
+ * Internal dependencies
+ */
+const { baseDir } = require( './shared' );
 
 module.exports = function( env = { environment: 'production', watch: false, buildTarget: false } ) {
-	const include_files = {
+	const entry = {
 		[ env.buildTarget + 'wp-includes/js/media-audiovideo.js' ]: ['./src/js/_enqueues/wp/media/audiovideo.js'],
 		[ env.buildTarget + 'wp-includes/js/media-audiovideo.min.js' ]: ['./src/js/_enqueues/wp/media/audiovideo.js'],
 		[ env.buildTarget + 'wp-includes/js/media-grid.js' ]: ['./src/js/_enqueues/wp/media/grid.js'],
@@ -18,20 +21,22 @@ module.exports = function( env = { environment: 'production', watch: false, buil
 	};
 
 	const mediaConfig = {
+		target: 'browserslist',
 		mode: "production",
 		cache: true,
-		entry: Object.assign( admin_files, include_files ),
+		entry,
 		output: {
 			path: baseDir,
 			filename: '[name]',
 		},
 		optimization: {
 			minimize: true,
-			moduleIds: 'hashed',
+			moduleIds: 'deterministic',
 			minimizer: [
-				new UglifyJsPlugin( {
+				new TerserPlugin( {
 					include: /\.min\.js$/,
-				} )
+					extractComments: false,
+				} ),
 			]
 		},
 		watch: env.watch,