Added babel-loader caching to improve subsequent build times. (aspnet#777)

DanHarman · SteveSandersonMS · commit 365b2c50cb3d · 2017-03-22T10:28:26.000Z
diff --git a/templates/ReactReduxSpa/webpack.config.js b/templates/ReactReduxSpa/webpack.config.js
@@ -10,14 +10,14 @@ module.exports = (env) => {
     // Configuration in common to both client-side and server-side bundles
     const sharedConfig = () => ({
         stats: { modules: false },
-        resolve: { extensions: [ '.js', '.jsx', '.ts', '.tsx' ] },
+        resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
         output: {
             filename: '[name].js',
             publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
         },
         module: {
             rules: [
-                { test: /\.tsx?$/, include: /ClientApp/, use: 'babel-loader' },
+                { test: /\.tsx?$/, include: /ClientApp/, use: { loader: 'babel-loader', options: { cacheDirectory: true } } },
                 { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' }
             ]
         },
@@ -74,4 +74,4 @@ module.exports = (env) => {
     });
 
     return [clientBundleConfig, serverBundleConfig];
-};
+};
diff --git a/templates/ReactSpa/webpack.config.js b/templates/ReactSpa/webpack.config.js
@@ -9,15 +9,15 @@ module.exports = (env) => {
     return [{
         stats: { modules: false },
         entry: { 'main': './ClientApp/boot.tsx' },
-        resolve: { extensions: [ '.js', '.jsx', '.ts', '.tsx' ] },
+        resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
         output: {
             path: path.join(__dirname, bundleOutputDir),
             filename: '[name].js',
             publicPath: '/dist/'
         },
         module: {
             rules: [
-                { test: /\.ts(x?)$/, include: /ClientApp/, use: 'babel-loader' },
+                { test: /\.ts(x?)$/, include: /ClientApp/, use: { loader: 'babel-loader', options: { cacheDirectory: true } } },
                 { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
                 { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader' }) },
                 { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
@@ -41,4 +41,4 @@ module.exports = (env) => {
             new ExtractTextPlugin('site.css')
         ])
     }];
-};
+};
