add babel cache + update wp config

.browserslistrc

@@ -1,5 +1,8 @@
-# Browsers that we support
-
+[production]
 defaults
-
 not IE 11
+
+[development]
+last 2 Chrome versions
+last 2 Firefox versions
+last 2 Safari versions

config/build/buildPlugins.ts

@@ -14,23 +14,17 @@ export function buildPlugins({
   apiUrl,
   project,
 }: BuildOptions): webpack.WebpackPluginInstance[] {
+  const isProd = !isDev;
   const plugins = [
     new HTMLWebpackPlugin({
       template: paths.html,
     }),
     new webpack.ProgressPlugin(),
-    new MiniCssExtractPlugin({
-      filename: "css/[name].[contenthash:8].css",
-      chunkFilename: "css/[name].[contenthash:8].css",
-    }),
     new webpack.DefinePlugin({
       __IS_DEV__: JSON.stringify(isDev),
       __API__: JSON.stringify(apiUrl),
       __PROJECT__: JSON.stringify(project),
     }),
-    new CopyPlugin({
-      patterns: [{ from: paths.locales, to: paths.buildLocales }],
-    }),
     new ForkTsCheckerWebpackPlugin({
       typescript: {
         diagnosticOptions: {
@@ -53,5 +47,19 @@ export function buildPlugins({
     );
   }
 
+  if (isProd) {
+    plugins.push(
+      new MiniCssExtractPlugin({
+        filename: "css/[name].[contenthash:8].css",
+        chunkFilename: "css/[name].[contenthash:8].css",
+      })
+    );
+    plugins.push(
+      new CopyPlugin({
+        patterns: [{ from: paths.locales, to: paths.buildLocales }],
+      })
+    );
+  }
+
   return plugins;
 }

config/build/buildWebpackConfig.ts

@@ -28,7 +28,7 @@ export function BuildWebpackConfig(
     plugins: buildPlugins(options),
 
     mode: mode,
-    devtool: isDev ? "inline-source-map" : undefined,
+    devtool: isDev ? "eval-cheap-module-source-map" : undefined,
     devServer: isDev ? buildDevServer(options) : undefined,
   };
 }

config/build/loaders/buildBabelLoader.ts

@@ -6,17 +6,21 @@ export interface BuildBabelLoaderProps extends BuildOptions {
 }
 
 export const buildBabelLoader = ({ isDev, isTsx }: BuildBabelLoaderProps) => {
+  const isProd = !isDev;
+
   return {
     test: isTsx ? /\.(jsx|tsx)$/ : /\.(js|ts)$/,
     exclude: /node_modules/,
     use: {
       loader: "babel-loader",
       options: {
+        cacheDirectory: true,
         presets: ["@babel/preset-env"],
         plugins: [
           ["@babel/plugin-transform-typescript", { isTsx }],
           "@babel/plugin-transform-runtime",
-          isTsx && [babelRemovePropsPlugin, { props: ["data-testid"] }],
+          isTsx &&
+            isProd && [babelRemovePropsPlugin, { props: ["data-testid"] }],
           isDev && require.resolve("react-refresh/babel"),
         ].filter(Boolean),
       },

config/build/loaders/buildCssLoader.ts

@@ -1,22 +1,23 @@
 import MiniCssExtractPlugin from "mini-css-extract-plugin";
 
 export const buildCssLoader = (isDev: boolean) => {
-    return {
-        test: /\.s[ac]ss$/i,
-        use: [
-            isDev ? "style-loader" : MiniCssExtractPlugin.loader,
-            {
-                loader: "css-loader",
-                options: {
-                    modules: {
-                        auto: /\.module\.\w+$/i,
-                        localIdentName: isDev
-                            ? "[path][name]__[local]--[hash:base64:5]"
-                            : "[hash:base64:8]",
-                    },
-                },
-            },
-            "sass-loader",
-        ],
-    };
-}
+  return {
+    test: /\.s[ac]ss$/i,
+    exclude: /node_modules/,
+    use: [
+      isDev ? "style-loader" : MiniCssExtractPlugin.loader,
+      {
+        loader: "css-loader",
+        options: {
+          modules: {
+            auto: /\.module\.\w+$/i,
+            localIdentName: isDev
+              ? "[path][name]__[local]--[hash:base64:5]"
+              : "[hash:base64:8]",
+          },
+        },
+      },
+      "sass-loader",
+    ],
+  };
+};