Framework: Avoid extending default configuration in Webpack build

package.json

@@ -125,6 +125,7 @@
 		"shallow-equals": "1.0.0",
 		"shallowequal": "1.1.0",
 		"simple-git": "1.113.0",
+		"source-map-loader": "0.2.4",
 		"sprintf-js": "1.1.1",
 		"stylelint-config-wordpress": "13.1.0",
 		"uuid": "3.3.2",
@@ -163,7 +164,7 @@
 		"clean:packages": "rimraf ./packages/*/build ./packages/*/build-module ./packages/*/build-style ./packages/*/node_modules",
 		"prebuild:packages": "npm run clean:packages && lerna run build",
 		"build:packages": "node ./bin/packages/build.js",
-		"build": "npm run build:packages && wp-scripts build --no-babel",
+		"build": "npm run build:packages && wp-scripts build",
 		"check-engines": "wp-scripts check-engines",
 		"check-licenses": "concurrently \"wp-scripts check-licenses --prod --gpl2\" \"wp-scripts check-licenses --dev\"",
 		"precheck-local-changes": "npm run docs:build",

packages/scripts/CHANGELOG.md

@@ -5,7 +5,6 @@
 - Leverage `@wordpress/dependency-extraction-webpack-plugin` plugin to extract WordPress
   dependencies.
 - The bundled `eslint` dependency has been updated from requiring `^5.12.1` to requiring `^5.16.0`.
-- Added new `--no-babel` flag for `build` script.
 
 ### Enhancements
 

packages/scripts/README.md

@@ -58,10 +58,6 @@ This is how you execute the script with presented setup:
 
 * `npm run build` - builds the code for production.
 
-_Flags_:
-
-- `--no-babel`: When present, excludes the default Babel file processing
-
 #### Advanced information
 
 This script uses [webpack](https://webpack.js.org/) behind the scenes. It'll look for a webpack config in the top-level directory of your package and will use it if it finds one. If none is found, it'll use the default config provided by `@wordpress/scripts` packages. Learn more in the [Advanced Usage](#advanced-usage) section.

packages/scripts/config/webpack.config.js

@@ -13,7 +13,7 @@ const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extrac
 /**
  * Internal dependencies
  */
-const { hasBabelConfig, hasCliArg } = require( '../utils' );
+const { hasBabelConfig } = require( '../utils' );
 
 const isProduction = process.env.NODE_ENV === 'production';
 const mode = isProduction ? 'production' : 'development';
@@ -33,8 +33,32 @@ const config = {
 		},
 	},
 	module: {
-		// Rules are conditionally assigned in logic below.
-		rules: [],
+		rules: [
+			{
+				test: /\.js$/,
+				exclude: /node_modules/,
+				use: [
+					require.resolve( 'thread-loader' ),
+					{
+						loader: require.resolve( 'babel-loader' ),
+						options: {
+							// Babel uses a directory within local node_modules
+							// by default. Use the environment variable option
+							// to enable more persistent caching.
+							cacheDirectory: process.env.BABEL_CACHE_DIRECTORY || true,
+
+							// Provide a fallback configuration if there's not
+							// one explicitly available in the project.
+							...( ! hasBabelConfig() && {
+								babelrc: false,
+								configFile: false,
+								presets: [ require.resolve( '@wordpress/babel-preset-default' ) ],
+							} ),
+						},
+					},
+				],
+			},
+		],
 	},
 	plugins: [
 		// WP_BUNDLE_ANALYZER global variable enables utility that represents bundle content
@@ -50,33 +74,6 @@ const config = {
 	},
 };
 
-if ( ! hasCliArg( '--no-babel' ) ) {
-	config.module.rules.push( {
-		test: /\.js$/,
-		exclude: /node_modules/,
-		use: [
-			require.resolve( 'thread-loader' ),
-			{
-				loader: require.resolve( 'babel-loader' ),
-				options: {
-					// Babel uses a directory within local node_modules
-					// by default. Use the environment variable option
-					// to enable more persistent caching.
-					cacheDirectory: process.env.BABEL_CACHE_DIRECTORY || true,
-
-					// Provide a fallback configuration if there's not
-					// one explicitly available in the project.
-					...( ! hasBabelConfig() && {
-						babelrc: false,
-						configFile: false,
-						presets: [ require.resolve( '@wordpress/babel-preset-default' ) ],
-					} ),
-				},
-			},
-		],
-	} );
-}
-
 if ( ! isProduction ) {
 	// WP_DEVTOOL global variable controls how source maps are generated.
 	// See: https://webpack.js.org/configuration/devtool/#devtool.

webpack.config.js

@@ -4,30 +4,35 @@
 const { DefinePlugin } = require( 'webpack' );
 const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
 const postcss = require( 'postcss' );
-const { get, escapeRegExp } = require( 'lodash' );
+const { get, escapeRegExp, compact } = require( 'lodash' );
 const { basename, sep } = require( 'path' );
 
 /**
  * WordPress dependencies
  */
 const CustomTemplatedPathPlugin = require( '@wordpress/custom-templated-path-webpack-plugin' );
 const LibraryExportDefaultPlugin = require( '@wordpress/library-export-default-webpack-plugin' );
-const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
+const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
 const { camelCaseDash } = require( '@wordpress/scripts/utils' );
 
 /**
  * Internal dependencies
  */
 const { dependencies } = require( './package' );
 
+const {
+	NODE_ENV: mode = 'development',
+	WP_DEVTOOL: devtool = ( mode === 'production' ? false : 'source-map' ),
+} = process.env;
+
 const WORDPRESS_NAMESPACE = '@wordpress/';
 
 const gutenbergPackages = Object.keys( dependencies )
 	.filter( ( packageName ) => packageName.startsWith( WORDPRESS_NAMESPACE ) )
 	.map( ( packageName ) => packageName.replace( WORDPRESS_NAMESPACE, '' ) );
 
 module.exports = {
-	...defaultConfig,
+	mode,
 	entry: gutenbergPackages.reduce( ( memo, packageName ) => {
 		const name = camelCaseDash( packageName );
 		memo[ name ] = `./packages/${ packageName }`;
@@ -39,8 +44,16 @@ module.exports = {
 		library: [ 'wp', '[name]' ],
 		libraryTarget: 'this',
 	},
+	module: {
+		rules: compact( [
+			mode !== 'production' && {
+				test: /\.js$/,
+				use: require.resolve( 'source-map-loader' ),
+				enforce: 'pre',
+			},
+		] ),
+	},
 	plugins: [
-		...defaultConfig.plugins,
 		new DefinePlugin( {
 			// Inject the `GUTENBERG_PHASE` global, used for feature flagging.
 			// eslint-disable-next-line @wordpress/gutenberg-phase
@@ -82,7 +95,7 @@ module.exports = {
 				to: `./build/${ packageName }/`,
 				flatten: true,
 				transform: ( content ) => {
-					if ( defaultConfig.mode === 'production' ) {
+					if ( mode === 'production' ) {
 						return postcss( [
 							require( 'cssnano' )( {
 								preset: [ 'default', {
@@ -134,5 +147,7 @@ module.exports = {
 				},
 			},
 		] ),
+		new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ),
 	],
+	devtool,
 };