Scripts: Optimize default Webpack configuration (WordPress#14860)

* Scripts: Use thread-loader in Babel compilation

* Scripts: Include Sourcemap Loader only in development environments

* Scripts: Use cache directory for Babel loader

* Fix package-lock.json to stop installing packages locally

* Tell webpack to look for thread-loader within the scripts node_modules folder

Author: aduth

package-lock.json

@@ -66,12 +66,6 @@ const externals = [
 const isProduction = process.env.NODE_ENV === 'production';
 const mode = isProduction ? 'production' : 'development';
 
-const getBabelLoaderOptions = () => hasBabelConfig() ? {} : {
-	babelrc: false,
-	configFile: false,
-	presets: [ require.resolve( '@wordpress/babel-preset-default' ) ],
-};
-
 const config = {
 	mode,
 	entry: {
@@ -89,18 +83,29 @@ const config = {
 	},
 	module: {
 		rules: [
-			{
-				test: /\.js$/,
-				use: require.resolve( 'source-map-loader' ),
-				enforce: 'pre',
-			},
 			{
 				test: /\.js$/,
 				exclude: /node_modules/,
-				use: {
-					loader: require.resolve( 'babel-loader' ),
-					options: getBabelLoaderOptions(),
-				},
+				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' ) ],
+							} ),
+						},
+					},
+				],
 			},
 		],
 	},
@@ -121,6 +126,11 @@ if ( ! isProduction ) {
 	// WP_DEVTOOL global variable controls how source maps are generated.
 	// See: https://webpack.js.org/configuration/devtool/#devtool.
 	config.devtool = process.env.WP_DEVTOOL || 'source-map';
+	config.module.rules.unshift( {
+		test: /\.js$/,
+		use: require.resolve( 'source-map-loader' ),
+		enforce: 'pre',
+	} );
 }
 
 module.exports = config;

packages/scripts/config/webpack.config.js

@@ -50,6 +50,7 @@
 		"source-map-loader": "^0.2.4",
 		"stylelint": "^9.10.1",
 		"stylelint-config-wordpress": "^13.1.0",
+		"thread-loader": "^2.1.2",
 		"webpack": "4.8.3",
 		"webpack-bundle-analyzer": "^3.0.3",
 		"webpack-cli": "^3.1.2",