From a674d333ec261ae2dacd5fcdc3d04f7705a39a1e Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Tue, 13 Jul 2021 17:30:14 +0200
Subject: [PATCH] Consolidate some config options under `baseConfig` export

---
 tools/webpack/blocks.js   |  16 +----
 tools/webpack/packages.js |  16 +----
 tools/webpack/shared.js   | 120 +++++++++++++++++++-------------------
 3 files changed, 63 insertions(+), 89 deletions(-)

diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js
index d96f334dcb5a88..98e1a7074fda9d 100644
--- a/tools/webpack/blocks.js
+++ b/tools/webpack/blocks.js
@@ -9,15 +9,7 @@ const fastGlob = require( 'fast-glob' );
 /**
  * Internal dependencies
  */
-const {
-	devtool,
-	mode,
-	moduleConfig,
-	optimization,
-	plugins,
-	stylesTransform,
-	watchOptions,
-} = require( './shared' );
+const { baseConfig, plugins, stylesTransform } = require( './shared' );
 
 /*
  * Matches a block's name in paths in the form
@@ -52,16 +44,14 @@ const createEntrypoints = () => {
 };
 
 module.exports = {
+	...baseConfig,
 	name: 'blocks',
-	optimization,
-	mode,
 	entry: createEntrypoints(),
 	output: {
 		devtoolNamespace: 'wp',
 		filename: './build/block-library/[name]/view.min.js',
 		path: join( __dirname, '..', '..' ),
 	},
-	module: moduleConfig,
 	plugins: [
 		...plugins,
 		new CopyWebpackPlugin( {
@@ -167,6 +157,4 @@ module.exports = {
 			),
 		} ),
 	].filter( Boolean ),
-	watchOptions,
-	devtool,
 };
diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js
index 3647c8c429a870..c20a23c3388b82 100644
--- a/tools/webpack/packages.js
+++ b/tools/webpack/packages.js
@@ -17,15 +17,7 @@ const {
  * Internal dependencies
  */
 const { dependencies } = require( '../../package' );
-const {
-	devtool,
-	mode,
-	moduleConfig,
-	optimization,
-	plugins,
-	stylesTransform,
-	watchOptions,
-} = require( './shared' );
+const { baseConfig, plugins, stylesTransform } = require( './shared' );
 
 const WORDPRESS_NAMESPACE = '@wordpress/';
 const BUNDLED_PACKAGES = [ '@wordpress/icons', '@wordpress/interface' ];
@@ -40,9 +32,8 @@ const gutenbergPackages = Object.keys( dependencies )
 	.map( ( packageName ) => packageName.replace( WORDPRESS_NAMESPACE, '' ) );
 
 module.exports = {
+	...baseConfig,
 	name: 'packages',
-	optimization,
-	mode,
 	entry: gutenbergPackages.reduce( ( memo, packageName ) => {
 		return {
 			...memo,
@@ -56,7 +47,6 @@ module.exports = {
 		library: [ 'wp', '[camelName]' ],
 		libraryTarget: 'window',
 	},
-	module: moduleConfig,
 	plugins: [
 		...plugins,
 		new CustomTemplatedPathPlugin( {
@@ -84,6 +74,4 @@ module.exports = {
 			} ) ),
 		} ),
 	].filter( Boolean ),
-	watchOptions,
-	devtool,
 };
diff --git a/tools/webpack/shared.js b/tools/webpack/shared.js
index 861573e8414cf6..f2f1cdf2aaefc4 100644
--- a/tools/webpack/shared.js
+++ b/tools/webpack/shared.js
@@ -18,62 +18,46 @@ const {
 	WP_DEVTOOL: devtool = mode === 'production' ? false : 'source-map',
 } = process.env;
 
-const stylesTransform = ( content ) => {
-	if ( mode === 'production' ) {
-		return postcss( [
-			require( 'cssnano' )( {
-				preset: [
-					'default',
-					{
-						discardComments: {
-							removeAll: true,
-						},
+const baseConfig = {
+	optimization: {
+		// Only concatenate modules in production, when not analyzing bundles.
+		concatenateModules:
+			mode === 'production' && ! process.env.WP_BUNDLE_ANALYZER,
+		minimizer: [
+			new TerserPlugin( {
+				cache: true,
+				parallel: true,
+				sourceMap: mode !== 'production',
+				terserOptions: {
+					output: {
+						comments: /translators:/i,
+					},
+					compress: {
+						passes: 2,
+					},
+					mangle: {
+						reserved: [ '__', '_n', '_nx', '_x' ],
 					},
-				],
-			} ),
-		] )
-			.process( content, {
-				from: 'src/app.css',
-				to: 'dest/app.css',
-			} )
-			.then( ( result ) => result.css );
-	}
-	return content;
-};
-
-const optimization = {
-	// Only concatenate modules in production, when not analyzing bundles.
-	concatenateModules:
-		mode === 'production' && ! process.env.WP_BUNDLE_ANALYZER,
-	minimizer: [
-		new TerserPlugin( {
-			cache: true,
-			parallel: true,
-			sourceMap: mode !== 'production',
-			terserOptions: {
-				output: {
-					comments: /translators:/i,
-				},
-				compress: {
-					passes: 2,
-				},
-				mangle: {
-					reserved: [ '__', '_n', '_nx', '_x' ],
 				},
+				extractComments: false,
+			} ),
+		],
+	},
+	mode,
+	module: {
+		rules: compact( [
+			mode !== 'production' && {
+				test: /\.js$/,
+				use: require.resolve( 'source-map-loader' ),
+				enforce: 'pre',
 			},
-			extractComments: false,
-		} ),
-	],
-};
-
-const moduleConfig = {
-	rules: compact( [
-		mode !== 'production' && {
-			test: /\.js$/,
-			use: require.resolve( 'source-map-loader' ),
-			enforce: 'pre',
-		},
-	] ),
+		] ),
+	},
+	watchOptions: {
+		ignored: [ '**/node_modules', '**/packages/*/src' ],
+		aggregateTimeout: 500,
+	},
+	devtool,
 };
 
 const plugins = [
@@ -93,17 +77,31 @@ const plugins = [
 	mode === 'production' && new ReadableJsAssetsWebpackPlugin(),
 ];
 
-const watchOptions = {
-	ignored: [ '**/node_modules', '**/packages/*/src' ],
-	aggregateTimeout: 500,
+const stylesTransform = ( content ) => {
+	if ( mode === 'production' ) {
+		return postcss( [
+			require( 'cssnano' )( {
+				preset: [
+					'default',
+					{
+						discardComments: {
+							removeAll: true,
+						},
+					},
+				],
+			} ),
+		] )
+			.process( content, {
+				from: 'src/app.css',
+				to: 'dest/app.css',
+			} )
+			.then( ( result ) => result.css );
+	}
+	return content;
 };
 
 module.exports = {
-	devtool,
-	mode,
-	moduleConfig,
-	optimization,
+	baseConfig,
 	plugins,
 	stylesTransform,
-	watchOptions,
 };