feat(scripts): add cache to babel loader for js and ts

This would default to node_modules/.cache/babel-loader which is
a sane default.

See #472

Author: swashata

examples/plugin/inc/class-wpackio-plugin-init.php

@@ -17,15 +17,15 @@ public function __construct() {
 
 
 	function plugin_enqueue() {
-		// $this->enqueue->enqueue( 'app', 'main', [] );
-		// $this->enqueue->enqueue( 'app', 'mobile', [] );
-		// $this->enqueue->enqueue( 'foo', 'main', [] );
+		$this->enqueue->enqueue( 'app', 'main', [] );
+		$this->enqueue->enqueue( 'app', 'mobile', [] );
+		$this->enqueue->enqueue( 'foo', 'main', [] );
 		$this->enqueue->enqueue( 'tsapp', 'main', [] );
 	}
 
 	function reactapp( $atts, $content = null ) {
 		// Enqueue our react app scripts
-		// $this->enqueue->enqueue( 'reactapp', 'main', [] );
+		$this->enqueue->enqueue( 'reactapp', 'main', [] );
 
 		// Print the entry point
 		return '<div id="wpackio-reactapp"></div>';

packages/scripts/src/config/WebpackConfigHelper.ts

@@ -369,6 +369,15 @@ ${bannerConfig.copyrightText}${bannerConfig.credit ? creditNote : ''}`,
 			hasReact,
 		};
 
+		const babelLoaderCacheOptions = {
+			// This is a feature of `babel-loader` for webpack (not Babel itself).
+			// It enables caching results in ./node_modules/.cache/babel-loader/
+			// directory for faster rebuilds.
+			cacheDirectory: true,
+			cacheCompression: !this.isDev,
+			compact: !this.isDev,
+		};
+
 		// check if babel.config.js is present
 		const isBabelConfigPresent = this.config.useBabelConfig;
 
@@ -400,7 +409,7 @@ ${bannerConfig.copyrightText}${bannerConfig.credit ? creditNote : ''}`,
 				{
 					loader: 'babel-loader',
 					options: isBabelConfigPresent
-						? {}
+						? { ...babelLoaderCacheOptions }
 						: this.getOverrideWebpackRuleOptions(
 								{
 									presets: jsPresets,
@@ -409,6 +418,7 @@ ${bannerConfig.copyrightText}${bannerConfig.credit ? creditNote : ''}`,
 									// rather use the jsBabelOverride
 									configFile: false,
 									babelrc: false,
+									...babelLoaderCacheOptions,
 								},
 								this.config.jsBabelOverride
 						  ),
@@ -432,7 +442,7 @@ ${bannerConfig.copyrightText}${bannerConfig.credit ? creditNote : ''}`,
 				{
 					loader: 'babel-loader',
 					options: isBabelConfigPresent
-						? {}
+						? { ...babelLoaderCacheOptions }
 						: this.getOverrideWebpackRuleOptions(
 								{
 									presets: tsPresets,
@@ -441,6 +451,7 @@ ${bannerConfig.copyrightText}${bannerConfig.credit ? creditNote : ''}`,
 									// rather use the jsBabelOverride
 									configFile: false,
 									babelrc: false,
+									...babelLoaderCacheOptions,
 									// We don't need plugin-proposal-class-properties
 									// because taken care of by @wpackio/base
 									// '@babel/proposal-class-properties',