enable babel-loader cache (#10083)

this speeds up repeated webpack builds by around 20%. It will use the
default cache directory `node_modules/.cache/babel-loader`.

Also added cache invalidation to workaround https://github.com/babel/babel-loader/issues/690

1 files changed, 8 insertions, 0 deletions

diff --git a/webpack.config.js b/webpack.config.js
index 14e5846ddf..57f624aa14 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -7,6 +7,7 @@ const PostCSSPresetEnv = require('postcss-preset-env');
 const PostCSSSafeParser = require('postcss-safe-parser');
 const TerserPlugin = require('terser-webpack-plugin');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const { statSync } = require('fs');
 const { resolve, parse } = require('path');
 const { SourceMapDevToolPlugin } = require('webpack');
 
@@ -84,6 +85,13 @@ module.exports = {
           {
             loader: 'babel-loader',
             options: {
+              cacheDirectory: true,
+              cacheCompression: false,
+              cacheIdentifier: [
+                resolve(__dirname, 'package.json'),
+                resolve(__dirname, 'package-lock.json'),
+                resolve(__dirname, 'webpack.config.js'),
+              ].map((path) => statSync(path).mtime.getTime()).join(':'),
               presets: [
                 [
                   '@babel/preset-env',