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: https://github.com/WordPress/gutenberg/pull/33818.

Props walbo, desrosj, mukesh27.
Fixes #51750.




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

tools/webpack/shared.js

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+const TerserPlugin = require( 'terser-webpack-plugin' );
+const postcss = require( 'postcss' );
+const { join } = require( 'path' );
+
+const baseDir = join( __dirname, '../../' );
+
+const baseConfig = ( env ) => {
+	const mode = env.environment;
+
+	const config = {
+		target: 'browserslist',
+		mode,
+		optimization: {
+			moduleIds: mode === 'production' ? 'deterministic' : 'named',
+			minimizer: [
+				new TerserPlugin( {
+					extractComments: false,
+				} ),
+			]
+		},
+		module: {
+			rules: [
+				{
+					test: /\.js$/,
+					use: [ 'source-map-loader' ],
+					enforce: 'pre',
+				},
+			],
+		},
+		resolve: {
+			modules: [
+				baseDir,
+				'node_modules',
+			],
+			alias: {
+				'lodash-es': 'lodash',
+			},
+		},
+		stats: 'errors-only',
+		watch: env.watch,
+	};
+
+	if ( mode === 'development' && env.buildTarget === 'build/' ) {
+		config.mode = 'production';
+		config.optimization = {
+			minimize: false,
+			moduleIds: 'deterministic',
+		};
+	} else if ( mode !== 'production' ) {
+		config.devtool = process.env.SOURCEMAP || 'source-map';
+	}
+
+	return config;
+};
+
+const stylesTransform = ( mode ) => ( 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;
+};
+
+module.exports = {
+	baseDir,
+	baseConfig,
+	stylesTransform,
+};