Implemented i18n cache busting

webpack/helpers.ts

@@ -1,18 +1,49 @@
-const path = require('path');
+import { readFileSync, readdirSync, statSync, Stats } from 'fs';
+import { join, resolve } from 'path';
+
+const md5 = require('md5');
 
 export const projectRoot = (relativePath) => {
-  return path.resolve(__dirname, '..', relativePath);
+  return resolve(__dirname, '..', relativePath);
 };
 
 export const globalCSSImports = () => {
   return [
-    projectRoot(path.join('src', 'styles', '_variables.scss')),
-    projectRoot(path.join('src', 'styles', '_mixins.scss')),
+    projectRoot(join('src', 'styles', '_variables.scss')),
+    projectRoot(join('src', 'styles', '_mixins.scss')),
   ];
 };
 
+/**
+ * Calculates the md5 hash of a file
+ *
+ * @param filePath The path of the file
+ */
+export function calculateFileHash(filePath: string): string {
+  const fileContent: Buffer = readFileSync(filePath);
+  return md5(fileContent);
+}
 
-module.exports = {
-  projectRoot,
-  globalCSSImports
-};
+/**
+ * Calculate the hashes of all the files (matching the given regex) in a certain folder
+ *
+ * @param folderPath The path of the folder
+ * @param regExp A regex of the files in the folder for which a hash needs to be generated
+ */
+export function getFileHashes(folderPath: string, regExp: RegExp): { [fileName: string]: string } {
+  const files: string[] = readdirSync(folderPath);
+  let hashes: { [fileName: string]: string } = {};
+
+  for (const file of files) {
+    if (file.match(regExp)) {
+      const filePath: string = join(folderPath, file);
+      const stats: Stats = statSync(filePath);
+
+      if (stats.isFile()) {
+        hashes[file] = calculateFileHash(filePath);
+      }
+    }
+  }
+
+  return hashes;
+}

webpack/webpack.common.ts

@@ -1,4 +1,5 @@
-import { globalCSSImports, projectRoot } from './helpers';
+import { globalCSSImports, projectRoot, getFileHashes, calculateFileHash } from './helpers';
+import { EnvironmentPlugin } from 'webpack';
 
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const path = require('path');
@@ -18,12 +19,13 @@ export const copyWebpackOptions = {
         // use [\/|\\] to match both POSIX and Windows separators
         const matches = absoluteFilename.match(/.*[\/|\\]assets[\/|\\](.+)\.json5$/);
         if (matches) {
+          const fileHash: string = process.env.NODE_ENV === 'production' ? `.${calculateFileHash(absoluteFilename)}` : '';
           // matches[1] is the relative path from src/assets to the JSON5 file, without the extension
-          return path.join('assets', matches[1] + '.json');
+          return path.join('assets', `${matches[1]}${fileHash}.json`);
         }
       },
       transform(content) {
-        return JSON.stringify(JSON5.parse(content.toString()))
+        return JSON.stringify(JSON5.parse(content.toString()));
       }
     },
     {
@@ -77,6 +79,9 @@ const SCSS_LOADERS = [
 
 export const commonExports = {
   plugins: [
+    new EnvironmentPlugin({
+      languageHashes: getFileHashes(path.join(__dirname, '..', 'src', 'assets', 'i18n'), /.*\.json5/g),
+    }),
     new CopyWebpackPlugin(copyWebpackOptions),
   ],
   module: {