cache all language builds in the same folder

write custom webpack loader to invalidate language specific files
choose most recent asset based on mtime rather than birthtime

scripts/TtagNonCacheableLoader.js

@@ -0,0 +1,20 @@
+/*
+ * webpack loader that
+ * marks modules that include ttag as non-cachable
+ */
+const filtered = {};
+
+module.exports = function (source) {
+  if (filtered.hasOwnProperty(this.resourcePath)) {
+    if (filtered[this.resourcePath]) {
+      this.cacheable(false);
+    }
+    return source;
+  }
+  const hasTtag = source.slice(0, 400).includes('ttag');
+  filtered[this.resourcePath] = hasTtag;
+  if (hasTtag) {
+    this.cacheable(false);
+  }
+  return source;
+}

src/core/assets.js

@@ -28,7 +28,7 @@ function checkAssets() {
     css: {},
   };
   const assetFiles = fs.readdirSync(assetDir);
-  const birthtimes = {};
+  const mtimes = {};
 
   for (const filename of assetFiles) {
     const parts = filename.split('.');
@@ -38,13 +38,13 @@ function checkAssets() {
       continue;
     }
     // if multiple candidates exist, take most recent created file
-    const birthtime = fs.statSync(path.resolve(assetDir, filename))
+    const mtime = fs.statSync(path.resolve(assetDir, filename))
-      .birthtime.getTime();
+      .mtime.getTime();
     const ident = parts.filter((a, ind) => ind !== parts.length - 2).join('.');
-    if (birthtimes[ident] && birthtimes[ident] > birthtime) {
+    if (mtimes[ident] && mtimes[ident] > mtime) {
       continue;
     }
-    birthtimes[ident] = birthtime;
+    mtimes[ident] = mtime;
 
     const ext = parts[parts.length - 1];
     const relPath = `${ASSET_DIR}/${filename}`;

webpack.config.client.js

@@ -37,14 +37,6 @@ function buildWebpackClientConfig(
     ['ttag', ttag],
   ];
 
-  // cache invalidates if .po file changed
-  const buildDependencies = {
-    config: [__filename],
-  }
-  if (locale !== 'default') {
-    buildDependencies.i18n = [ttag.resolve.translations];
-  }
-
   return {
     name: 'client',
     target: 'web',
@@ -69,6 +61,7 @@ function buildWebpackClientConfig(
         ? '[name].[chunkhash:8].js'
         : `[name].${locale}.[chunkhash:8].js`,
       chunkFilename: `[name].${locale}.[chunkhash:8].js`,
+      clean: true,
     },
 
     resolve: {
@@ -91,9 +84,7 @@ function buildWebpackClientConfig(
         {
           test: /\.svg$/,
           use: [
-            {
+            'babel-loader',
-              loader: 'babel-loader',
-            },
             {
               loader: 'react-svg-loader',
               options: {
@@ -114,16 +105,21 @@ function buildWebpackClientConfig(
         },
         {
           test: /\.(js|jsx)$/,
-          loader: 'babel-loader',
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {
+                plugins: babelPlugins,
+              },
+            },
+            path.resolve('scripts/TtagNonCacheableLoader.js'),
+          ],
           include: [
             path.resolve('src'),
             ...['image-q'].map((moduleName) => (
               path.resolve('node_modules', moduleName)
             )),
           ],
-          options: {
-            plugins: babelPlugins,
-          },
         },
       ],
     },
@@ -168,7 +164,7 @@ function buildWebpackClientConfig(
       },
     },
 
-    recordsPath: path.join(__dirname, 'records.json'),
+    recordsPath: path.resolve('records.json'),
 
     stats: {
       colors: true,
@@ -179,20 +175,19 @@ function buildWebpackClientConfig(
     },
 
     cache: (extract) ? false
-      : {
+     : {
         type: 'filesystem',
-        name: (development) ? `${locale}-dev` : locale,
-        buildDependencies,
       },
   };
 }
 
 function getAllAvailableLocals() {
+  // return ['default', 'de', 'tr'];
   const langDir = path.resolve('i18n');
   const langs = fs.readdirSync(langDir)
     .filter((e) => (e.endsWith('.po') && !e.startsWith('ssr')))
     .map((l) => l.slice(0, -3));
-  langs.push('default');
+  langs.unshift('default');
   return langs;
 }