Scripts: Update webpack to v5 (try 2) (#33818)

* Scripts: Update webpack to v5 (try 2)

* Remove the deprecated flatten option of CopyPlugin

* Custom name function for split chunks

* Update the default webpack config for `@wordpress/scripts`
It adjusts handling for assets that changed in v5.

* Try: Webpack 5 packages entry library config

* Update hashes in test snapshots

* Deprecate Library Export Default Webpack Plugin for webpack 5

* Update `@wordpress/scripts` changelog file

* Docs: Add changelog entry in `@wordpress/dependency-extraction-webpack-plugin`

* Revert `webpack-sources` version upgrade

* Make Storybook run with webpack 5

* Log asset names in test messages, avoid optimizing out the entire source

* Improve webpack config for Storybook

* Increase the minimum Node version in `@wordpress/scripts`

* Ensure sthere is no empty JS file for exctracted CSS file

Co-authored-by: Jarda Snajdr <[email protected]>
Co-authored-by: Petter Walbø Johnsgård <[email protected]>

package.json

@@ -100,6 +100,8 @@
 		"@storybook/addon-knobs": "6.2.9",
 		"@storybook/addon-storysource": "6.3.2",
 		"@storybook/addon-viewport": "6.3.2",
+		"@storybook/builder-webpack5": "6.3.6",
+		"@storybook/manager-webpack5": "6.3.6",
 		"@storybook/react": "6.3.2",
 		"@testing-library/jest-dom": "5.11.9",
 		"@testing-library/react": "11.2.2",
@@ -118,8 +120,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",
@@ -159,10 +159,10 @@
 		"chalk": "4.1.1",
 		"commander": "4.1.0",
 		"concurrently": "3.5.0",
-		"copy-webpack-plugin": "6.4.0",
+		"copy-webpack-plugin": "9.0.1",
 		"core-js-builder": "3.11.0",
 		"cross-env": "3.2.4",
-		"css-loader": "5.1.3",
+		"css-loader": "6.2.0",
 		"cssnano": "5.0.7",
 		"deep-freeze": "0.0.1",
 		"enzyme": "3.11.0",
@@ -191,7 +191,7 @@
 		"node-watch": "0.7.0",
 		"patch-package": "6.2.2",
 		"postcss": "8.2.15",
-		"postcss-loader": "4.2.0",
+		"postcss-loader": "6.1.1",
 		"prettier": "npm:[email protected]",
 		"progress": "2.0.3",
 		"react": "17.0.1",
@@ -201,20 +201,20 @@
 		"rimraf": "3.0.2",
 		"rtlcss": "2.6.2",
 		"sass": "1.35.2",
-		"sass-loader": "10.1.1",
+		"sass-loader": "12.1.0",
 		"semver": "7.3.2",
 		"simple-git": "^2.35.0",
 		"snapshot-diff": "0.8.1",
-		"source-map-loader": "0.2.4",
+		"source-map-loader": "3.0.0",
 		"sprintf-js": "1.1.1",
-		"style-loader": "2.0.0",
-		"terser-webpack-plugin": "3.0.3",
+		"style-loader": "3.2.1",
+		"terser-webpack-plugin": "5.1.4",
 		"typescript": "4.1.3",
 		"uglify-js": "3.13.7",
 		"uuid": "8.3.0",
 		"wd": "1.12.1",
-		"webpack": "4.46.0",
-		"webpack-bundle-analyzer": "4.2.0",
+		"webpack": "5.47.1",
+		"webpack-bundle-analyzer": "4.4.2",
 		"worker-farm": "1.7.0"
 	},
 	"scripts": {

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' => 'bedcdcf40ea252047201aa0ee74a9377'), 'fileB.js' => array('dependencies' => array('wp-token-list'), 'version' => 'bec6f52af59733fff68cf46dbce8e226'));"`;
 
 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' => 'd56d3ad4bd3fcf9605c3d640d369cde4');"`;
 
 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' => '844c4b1f2a6db3a13416e9ea339e6334');"`;
 
 exports[`Webpack \`function-output-filename\` should produce expected output: External modules should match snapshot 1`] = `
 Array [
@@ -68,7 +68,7 @@ Array [
 ]
 `;
 
-exports[`Webpack \`has-extension-suffix\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '99bd32161d8514cc8c0cb8b0543ace3f');"`;
+exports[`Webpack \`has-extension-suffix\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'c35663ec29b695840a3c52d6fcc041c3');"`;
 
 exports[`Webpack \`has-extension-suffix\` should produce expected output: External modules should match snapshot 1`] = `
 Array [
@@ -88,15 +88,15 @@ Array [
 ]
 `;
 
-exports[`Webpack \`no-default\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array(), 'version' => '7cedfbba436728640c2c4961b598ab32');"`;
+exports[`Webpack \`no-default\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array(), 'version' => 'feb97b1f3aec28878f5872b60f37567b');"`;
 
 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' => 'd77fa1fabdfc18f9520a9325e0768b24');"`;
 
 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\\":\\"c0593f49cf023b00b43d085327cd4e3b\\"}"`;
 
 exports[`Webpack \`output-format-json\` should produce expected output: External modules should match snapshot 1`] = `
 Array [
@@ -108,7 +108,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' => '90aabe80a22b120d4ce792caba9e2238');"`;
 
 exports[`Webpack \`overrides\` should produce expected output: External modules should match snapshot 1`] = `
 Array [
@@ -144,7 +144,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' => '844c4b1f2a6db3a13416e9ea339e6334');"`;
 
 exports[`Webpack \`wordpress\` should produce expected output: External modules should match snapshot 1`] = `
 Array [
@@ -164,7 +164,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' => '2a613fdd9e36fb13cd706b2d42a66ba3');"`;
 
 exports[`Webpack \`wordpress-require\` should produce expected output: External modules should match snapshot 1`] = `
 Array [

packages/library-export-default-webpack-plugin/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Deprecations
+
+-   This plugin is deprecated for webpack 5. Please use [`output.library.export`](https://webpack.js.org/configuration/output/#outputlibraryexport) instead ([#33818](ttps://github.com/WordPress/gutenberg/pull/33818)).
+
 ## 2.0.0 (2021-01-21)
 
 ### Breaking Changes

packages/library-export-default-webpack-plugin/README.md

@@ -1,5 +1,7 @@
 # Library Export Default Webpack Plugin
 
+> **DEPRECATED for webpack v5**: please use [`output.library.export`](https://webpack.js.org/configuration/output/#outputlibraryexport) instead.
+
 Webpack plugin for exporting `default` property for selected libraries which use ES6 Modules. Implementation is based on the Webpack's core plugin [ExportPropertyMainTemplatePlugin](https://github.com/webpack/webpack/blob/51b0df77e4f366163730ee465f01458bfad81f34/lib/ExportPropertyMainTemplatePlugin.js). The only difference is that this plugin allows to include all entry point names where the default export of your entry point will be assigned to the library target.
 
 ## Installation
@@ -10,7 +12,7 @@ Install the module
 npm install @wordpress/library-export-default-webpack-plugin --save
 ```
 
-**Note**: This package requires Node.js 12.0.0 or later. It also requires webpack 4.0 and newer. It is not compatible with older versions.
+**Note**: This package requires Node.js 12.0.0 or later. It is not compatible with older versions. It works only with webpack v4.
 
 ## Usage