fixed font loading issue and updated .gitignore file

webpack.config.js

@@ -2,14 +2,13 @@ const HtmlWebPackPlugin = require('html-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
-const TerserPlugin = require('terser-webpack-plugin')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 const dotenv = require('dotenv')
 const webpack = require('webpack')
+const path = require('path')
 
 const prod =
   (process.env.NODE_ENV ? process.env.NODE_ENV : '').trim() === 'production'
-const path = require('path')
 
 module.exports = () => {
   dotenv.config({
@@ -21,10 +20,10 @@ module.exports = () => {
     output: {
       filename: '[name].[contenthash].js',
       path: path.resolve(__dirname, 'dist'),
-      clean: true,
+      assetModuleFilename: 'assets/[name][ext]',
     },
     resolve: {
-      extensions: ['.tsx', '.ts', '.js'],
+      extensions: ['.js', '.ts', '.tsx'],
     },
     optimization: {
       runtimeChunk: 'single',
@@ -67,7 +66,15 @@ module.exports = () => {
         patterns: [
           {
             from: 'src/static/images',
-            to: 'static/images',
+            to: 'resources/',
+          },
+        ],
+      }),
+      new CopyWebpackPlugin({
+        patterns: [
+          {
+            from: 'src/fonts',
+            to: 'fonts/',
           },
         ],
       }),
@@ -96,19 +103,15 @@ module.exports = () => {
           use: ['@svgr/webpack'],
         },
         {
-          test: /\.css$/i,
-          use: [MiniCssExtractPlugin.loader, 'css-loader'],
-        },
-        {
-          test: /\.scss$/,
+          test: /\.(sass|less|css|scss)$/,
+          // include: path.resolve(__dirname),
           use: [
-            {
-              loader: MiniCssExtractPlugin.loader,
-              options: {
-                publicPath: '../',
-              },
-            },
+            // fallback to style-loader in development
+            process.env.NODE_ENV !== 'production'
+              ? 'style-loader'
+              : MiniCssExtractPlugin.loader,
             'css-loader',
+            'resolve-url-loader',
             'sass-loader',
           ],
         },
@@ -125,6 +128,14 @@ module.exports = () => {
             },
           ],
         },
+        {
+          test: /\.(woff|woff2|eot|ttf|otf)$/,
+          // include: path.resolve(__dirname),
+          type: 'asset/resource',
+          generator: {
+            filename: './fonts/[name][ext]',
+          },
+        },
       ],
     },
   }