add an esbuild bundler to the webpack

config/build/buildWebpackConfig.ts

@@ -1,5 +1,5 @@
 import type webpack from 'webpack';
-import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import { EsbuildPlugin } from 'esbuild-loader';
 
 import { devServer } from './devServer';
 import { loaders } from './loaders';
@@ -31,7 +31,12 @@ export const buildWebpackConfig = function (
     plugins: plugins(options),
     optimization: {
       runtimeChunk: 'single',
-      minimizer: [new CssMinimizerPlugin()],
+      minimizer: [
+        new EsbuildPlugin({
+          target: 'es2015',
+          css: true,
+        }),
+      ],
     },
   };
 };

config/build/loaders.ts

@@ -27,29 +27,14 @@ export const loaders = function (
 
   const svgLoader = initSvgLoader();
 
-  const babelLoader = {
-    test: /\.(js|ts)(x)?$/,
+  const esbuildLoader = {
+    // Match `.js`, `.jsx`, `.ts` or `.tsx` files
+    test: /\.[jt]sx?$/,
     exclude: /node_modules/,
-    use: [
-      {
-        loader: 'babel-loader',
-        options: {
-          presets: ['@babel/preset-env'],
-        },
-      },
-    ],
-  };
-  const typescriptLoader = {
-    test: /\.tsx?$/,
-    exclude: /node_modules/,
-    use: [
-      {
-        loader: 'ts-loader',
-        options: {
-          transpileOnly: true,
-        },
-      },
-    ],
+    loader: 'esbuild-loader',
+    options: {
+      target: 'es2015',
+    },
   };
 
   const cssLoader = initCssLoader({ isDev });
@@ -58,8 +43,7 @@ export const loaders = function (
     fontLoader,
     imageLoader,
     svgLoader,
-    babelLoader,
-    typescriptLoader,
+    esbuildLoader,
     cssLoader,
   ];
 };

config/build/plugins.ts

@@ -4,6 +4,7 @@ import CopyPlugin from 'copy-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import Dotenv from 'dotenv-webpack';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import { EsbuildPlugin } from 'esbuild-loader';
 
 import { type IBuildOptions } from './types/config';
 
@@ -21,9 +22,11 @@ export const plugins = function (
       filename: isDev ? 'css/[name].css' : 'css/[name].[contenthash:8].css',
       chunkFilename: isDev ? 'css/[id].css' : 'css/[id].[contenthash:8].css',
     }),
-    new webpack.DefinePlugin({
-      __IS_DEV__: JSON.stringify(isDev),
-      // 'process.env': JSON.stringify(process.env),
+    new EsbuildPlugin({
+      define: {
+        __IS_DEV__: JSON.stringify(isDev),
+        // 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+      },
     }),
     new Dotenv(),
   ];

tsconfig.json

@@ -14,6 +14,7 @@
     "sourceMap": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
+    "isolatedModules": true,
     "lib": ["DOM", "ES2022", "DOM.Iterable"],
     "strictNullChecks": true,
     "strict": true,

webpack.config.ts

@@ -1,7 +1,7 @@
 import type webpack from 'webpack';
 import type { IBuildEnvironment, IBuildPaths, TBuildMode } from './config/build/types/config';
-import path from 'path';
 
+import path from 'path';
 import { buildWebpackConfig } from './config/build/buildWebpackConfig';
 
 export default (env: IBuildEnvironment): webpack.Configuration => {