96252: Transform .json5 to .json in Webpack

This allows us to get rid of the json5 dependency in the main bundle and reduces the size of the i18n files we serve a bit

webpack/webpack.browser.ts

@@ -13,14 +13,14 @@ module.exports = Object.assign({}, commonExports, {
     new CompressionPlugin({
       filename: '[path][base].gz',
       algorithm: 'gzip',
-      test: /\.(js|css|html|svg|json5)$/,
+      test: /\.(js|css|html|svg|json)$/,
       threshold: 10240,
       minRatio: 0.8,
     }),
     new CompressionPlugin({
       filename: '[path][base].br',
       algorithm: 'brotliCompress',
-      test: /\.(js|css|html|svg|json5)$/,
+      test: /\.(js|css|html|svg|json)$/,
       compressionOptions: {
         params: {
           [zlib.constants.BROTLI_PARAM_QUALITY]: 11,

webpack/webpack.common.ts

@@ -3,6 +3,7 @@ import { globalCSSImports, projectRoot } from './helpers';
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const path = require('path');
 const sass = require('sass');
+const JSON5 = require('json5');
 
 export const copyWebpackOptions = {
   patterns: [
@@ -11,6 +12,20 @@ export const copyWebpackOptions = {
       to: path.join('assets', 'fonts'),
       force: undefined
     },
+    {
+      from: path.join(__dirname, '..', 'src', 'assets', '**', '*.json5').replace(/\\/g, '/'),
+      to({ absoluteFilename }) {
+        // use [\/|\\] to match both POSIX and Windows separators
+        const matches = absoluteFilename.match(/.*[\/|\\]assets[\/|\\](.+)\.json5$/);
+        if (matches) {
+          // matches[1] is the relative path from src/assets to the JSON5 file, without the extension
+          return path.join('assets', matches[1] + '.json');
+        }
+      },
+      transform(content) {
+        return JSON.stringify(JSON5.parse(content.toString()))
+      }
+    },
     {
       from: path.join(__dirname, '..', 'src', 'assets'),
       to: 'assets',