Set up loader, logger in webpack config

Author: MajorLift

development/webpack/utils/config.ts

@@ -1,7 +1,6 @@
 import { join } from 'node:path';
 import { readFileSync } from 'node:fs';
 import { parse } from 'dotenv';
-import type { ReactCompilerLoaderOption } from 'react-compiler-webpack';
 import { setEnvironmentVariables } from '../../build/set-environment-variables';
 import type { Variables } from '../../lib/variables';
 import type { BuildTypesConfig, BuildType } from '../../lib/build-type';
@@ -190,6 +189,3 @@ function loadConfigVars(
 
   return definitions;
 }
-export const reactCompilerOptions = {
-  target: '17',
-} as const satisfies ReactCompilerLoaderOption;

development/webpack/webpack.config.ts

@@ -18,10 +18,6 @@ import rtlCss from 'postcss-rtlcss';
 import autoprefixer from 'autoprefixer';
 import discardFonts from 'postcss-discard-font-face';
 import type ReactRefreshPluginType from '@pmmmwh/react-refresh-webpack-plugin';
-import {
-  defineReactCompilerLoaderOption,
-  reactCompilerLoader,
-} from 'react-compiler-webpack';
 import tailwindcss from 'tailwindcss';
 import { loadBuildTypesConfig } from '../lib/build-type';
 import {
@@ -38,7 +34,11 @@ import { transformManifest } from './utils/plugins/ManifestPlugin/helpers';
 import { parseArgv, getDryRunMessage } from './utils/cli';
 import { getCodeFenceLoader } from './utils/loaders/codeFenceLoader';
 import { getSwcLoader } from './utils/loaders/swcLoader';
-import { getVariables, reactCompilerOptions } from './utils/config';
+import {
+  getReactCompilerLoader,
+  getReactCompilerLogger,
+} from './utils/loaders/reactCompilerLoader';
+import { getVariables } from './utils/config';
 import { ManifestPlugin } from './utils/plugins/ManifestPlugin';
 import { getLatestCommit } from './utils/git';
 
@@ -215,13 +215,29 @@ if (args.progress) {
   const { ProgressPlugin } = require('webpack');
   plugins.push(new ProgressPlugin());
 }
+
+if (args.reactCompilerVerbose) {
+  plugins.push({
+    apply(compiler) {
+      compiler.hooks.done.tap('ReactCompilerStatsPlugin', () => {
+        const logger = getReactCompilerLogger();
+        logger.logSummary();
+      });
+    },
+  } as WebpackPluginInstance);
+}
+
 // #endregion plugins
 
 const swcConfig = { args, browsersListQuery, isDevelopment };
 const tsxLoader = getSwcLoader('typescript', true, safeVariables, swcConfig);
 const jsxLoader = getSwcLoader('ecmascript', true, safeVariables, swcConfig);
 const npmLoader = getSwcLoader('ecmascript', false, {}, swcConfig);
 const cjsLoader = getSwcLoader('ecmascript', false, {}, swcConfig, 'commonjs');
+const reactCompilerLoader = getReactCompilerLoader(
+  '17',
+  args.reactCompilerVerbose,
+);
 
 const config = {
   entry,
@@ -327,12 +343,7 @@ const config = {
       {
         test: /(?!\.(?:test|stories|container))\.(?:m?[jt]s|[jt]sx)$/u,
         include: UI_DIR_RE,
-        use: [
-          {
-            loader: reactCompilerLoader,
-            options: defineReactCompilerLoaderOption(reactCompilerOptions),
-          },
-        ],
+        use: [reactCompilerLoader],
       },
       // own typescript, and own typescript with jsx
       {