Framework: Remove packages build from build, dev scripts (#15226)

* Framework: Omit Babel processing from Webpack configuration

* Framework: Remove packages build from build, dev scripts

* Build Tooling: Update Webpack config to operate on source files

* Revert "Build Tooling: Update Webpack config to operate on source files"

This reverts commit 8ca8c18.

* Revert "Framework: Remove packages build from build, dev scripts"

This reverts commit 0021e5c.

* Scripts: Add flag `--no-babel` for excluding Babel processing

* Framework: Exclude Babel processing by build script flag

* Framework: Avoid extending default configuration in Webpack build

Author: aduth

package.json

@@ -127,6 +127,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",

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,
 };