Upgrade webpack to version 5 (#26382)

* custom-templated-path plugin: add peer dep on v5

* library-export-default plugin: add peer dep on v5

* Add target:browserslist to webpack config to specify what ES6 features can be in runtime

Tells webpack whether it can use arrow functions or `let`/`const` in the generated runtime code.
Will start really work only after the fix in webpack/webpack#11754 is
released. Until then, arrow functions are incorrectly emitted even when they shouldn't.

* Upgrade webpack and webpack-cli in package.json

* Update hash-containing test snapshots for dependency-extraction-webpack-plugin

* Update package-lock.json

* Docs: Add changelog entry for webpack major version bump

Co-authored-by: Grzegorz Ziolkowski <grzegorz@gziolo.pl>

package.json

@@ -107,8 +107,6 @@
 		"@types/sprintf-js": "1.1.2",
 		"@types/tinycolor2": "1.4.2",
 		"@types/uuid": "8.3.0",
-		"@types/webpack": "4.41.16",
-		"@types/webpack-sources": "0.1.7",
 		"@wordpress/babel-plugin-import-jsx-pragma": "file:packages/babel-plugin-import-jsx-pragma",
 		"@wordpress/babel-plugin-makepot": "file:packages/babel-plugin-makepot",
 		"@wordpress/babel-preset-default": "file:packages/babel-preset-default",
@@ -198,7 +196,7 @@
 		"typescript": "4.0.3",
 		"uuid": "8.3.0",
 		"wd": "1.12.1",
-		"webpack": "4.42.0",
+		"webpack": "5.10.0",
 		"webpack-bundle-analyzer": "4.2.0",
 		"worker-farm": "1.7.0"
 	},

packages/custom-templated-path-webpack-plugin/package.json

@@ -31,7 +31,7 @@
 		"escape-string-regexp": "^1.0.5"
 	},
 	"peerDependencies": {
-		"webpack": "^4.0.0"
+		"webpack": "^4.0.0 || ^5.0.0"
 	},
 	"publishConfig": {
 		"access": "public"

packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Webpack \`combine-assets\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('fileA.js' => array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'a3da22ced6876ec052d2861d383960fc'), 'fileB.js' => array('dependencies' => array('wp-token-list'), 'version' => '1a2b3802cc39dc1a607ecc4d0b23fcb0'));"`;
+exports[`Webpack \`combine-assets\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('fileA.js' => array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'c1a0364500c80987c940e1d047a1f440'), 'fileB.js' => array('dependencies' => array('wp-token-list'), 'version' => '371032d1471df7da2912fa1cd5474f64'));"`;
 
 exports[`Webpack \`combine-assets\` should produce expected output: External modules should match snapshot 1`] = `
 Array [
@@ -28,7 +28,7 @@ Array [
 ]
 `;
 
-exports[`Webpack \`dynamic-import\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'd5c613274c346f46e16ab4d320fc01e6');"`;
+exports[`Webpack \`dynamic-import\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '6beab7b6d11b0d5aa173d6c30876cf75');"`;
 
 exports[`Webpack \`dynamic-import\` should produce expected output: External modules should match snapshot 1`] = `
 Array [
@@ -48,7 +48,7 @@ Array [
 ]
 `;
 
-exports[`Webpack \`function-output-filename\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'f6dc46e27c3a9e7338ed4fa9fdf8f606');"`;
+exports[`Webpack \`function-output-filename\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'b3f0507c52ecec25e3fd43e9c24a2686');"`;
 
 exports[`Webpack \`function-output-filename\` should produce expected output: External modules should match snapshot 1`] = `
 Array [
@@ -68,15 +68,15 @@ Array [
 ]
 `;
 
-exports[`Webpack \`no-default\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array(), 'version' => '0a2f4c4cfbc33dde065a2e4be1e6337c');"`;
+exports[`Webpack \`no-default\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array(), 'version' => '8496c3a9f730be0cb9c1d98a4dccf779');"`;
 
 exports[`Webpack \`no-default\` should produce expected output: External modules should match snapshot 1`] = `Array []`;
 
-exports[`Webpack \`no-deps\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array(), 'version' => 'e8e65570823ee9206bdada3a0f11b610');"`;
+exports[`Webpack \`no-deps\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array(), 'version' => 'edf63f92d4912e4dc86233ff82ab4eff');"`;
 
 exports[`Webpack \`no-deps\` should produce expected output: External modules should match snapshot 1`] = `Array []`;
 
-exports[`Webpack \`output-format-json\` should produce expected output: Asset file should match snapshot 1`] = `"{\\"dependencies\\":[\\"lodash\\"],\\"version\\":\\"aeb5066a5e17aea01932c77baf342372\\"}"`;
+exports[`Webpack \`output-format-json\` should produce expected output: Asset file should match snapshot 1`] = `"{\\"dependencies\\":[\\"lodash\\"],\\"version\\":\\"0cc76fc6a71a3027053c3fe635f4026a\\"}"`;
 
 exports[`Webpack \`output-format-json\` should produce expected output: External modules should match snapshot 1`] = `
 Array [
@@ -88,7 +88,7 @@ Array [
 ]
 `;
 
-exports[`Webpack \`overrides\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('wp-blob', 'wp-script-handle-for-rxjs', 'wp-url'), 'version' => '67d711ce8940ddb82e7f264f61a5a3d9');"`;
+exports[`Webpack \`overrides\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('wp-blob', 'wp-script-handle-for-rxjs', 'wp-url'), 'version' => '18b6bab716b493f09a08360d4a7da0e4');"`;
 
 exports[`Webpack \`overrides\` should produce expected output: External modules should match snapshot 1`] = `
 Array [
@@ -124,7 +124,7 @@ Array [
 ]
 `;
 
-exports[`Webpack \`wordpress\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '202b3ce17cfd72799ce45e7efa04d83c');"`;
+exports[`Webpack \`wordpress\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'b3f0507c52ecec25e3fd43e9c24a2686');"`;
 
 exports[`Webpack \`wordpress\` should produce expected output: External modules should match snapshot 1`] = `
 Array [
@@ -144,7 +144,7 @@ Array [
 ]
 `;
 
-exports[`Webpack \`wordpress-require\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '47b0c1540a1caf08b8931e4a4328db04');"`;
+exports[`Webpack \`wordpress-require\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'f6db2e391b22a13b164814dfb5842d3f');"`;
 
 exports[`Webpack \`wordpress-require\` should produce expected output: External modules should match snapshot 1`] = `
 Array [

packages/library-export-default-webpack-plugin/package.json

@@ -33,7 +33,7 @@
 		"webpack-sources": "^1.1.0"
 	},
 	"peerDependencies": {
-		"webpack": "^4.0.0"
+		"webpack": "^4.0.0 || ^5.0.0"
 	},
 	"publishConfig": {
 		"access": "public"

packages/scripts/CHANGELOG.md

@@ -4,7 +4,8 @@
 
 ### Breaking Changes
 
--   The peer `jest` dependency has been updated from requiring `>=25` to requiring `>=26` (see [Breaking Changes](https://jestjs.io/blog/2020/05/05/jest-26), [#27956](https://github.com/WordPress/gutenberg/pull/27956)).
+-   The bundled `jest` dependency has been updated to the next major version `^26.6.3` (see [Breaking Changes](https://jestjs.io/blog/2020/05/05/jest-26), [#27956](https://github.com/WordPress/gutenberg/pull/27956)).
+-   The bundled `webpack` dependency has been updated to the next major version `^5.10.0` (see [Breaking Changes](https://webpack.js.org/migrate/5/), [#26382](https://github.com/WordPress/gutenberg/pull/26382)).
 -   The bundled `@wordpress/eslint-plugin` dependency has been updated to the next major version `^8.0.0`. There are new ESLint rules enabled in the recommended config used by `lint-js` command.
 -   The bundled `stylelint-config-wordpress` dependency has been replaced with `@wordpress/stylelint-config` (#27810)[https://github.com/WordPress/gutenberg/pull/27810].
 

packages/scripts/config/webpack.config.js

@@ -48,6 +48,7 @@ const cssLoaders = [
 
 const config = {
 	mode,
+	target: 'browserslist',
 	entry: {
 		index: path.resolve( process.cwd(), 'src', 'index.js' ),
 	},

packages/scripts/package.json

@@ -71,9 +71,9 @@
 		"terser-webpack-plugin": "^3.0.3",
 		"thread-loader": "^2.1.3",
 		"url-loader": "^3.0.0",
-		"webpack": "^4.42.0",
+		"webpack": "^5.10.0",
 		"webpack-bundle-analyzer": "^4.2.0",
-		"webpack-cli": "^3.3.11",
+		"webpack-cli": "^4.1.0",
 		"webpack-livereload-plugin": "^2.3.0",
 		"webpack-sources": "^2.2.0"
 	},

webpack.config.js

@@ -87,6 +87,7 @@ module.exports = {
 		],
 	},
 	mode,
+	target: 'browserslist',
 	entry: gutenbergPackages.reduce( ( memo, packageName ) => {
 		const name = camelCaseDash( packageName );
 		memo[ name ] = `./packages/${ packageName }`;