update front deps

Author: nasdan

front/.babelrc

@@ -4,5 +4,5 @@
     "@babel/preset-typescript",
     "@babel/preset-react"
   ],
-  "plugins": ["react-hot-loader/babel", "emotion"]
+  "plugins": ["@emotion"]
 }

front/config/webpack/base.js

@@ -1,5 +1,5 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const merge = require('webpack-merge');
+const {merge} = require('webpack-merge');
 const helpers = require('./helpers');
 const CopyPlugin = require('copy-webpack-plugin');
 
@@ -22,31 +22,22 @@ module.exports = merge(
     entry: {
       app: ['regenerator-runtime/runtime', './index.tsx'],
     },
+    output: {
+      path: helpers.resolveFromRootPath('dist'),
+      publicPath: '/',
+    },
     module: {
       rules: [
-        {
-          test: /\.tsx?$/,
-          exclude: /node_modules/,
-          loader: 'babel-loader',
-        },
         {
           test: /\.svg$/,
           use: ['@svgr/webpack'],
         },
-      ],
-    },
-    optimization: {
-      runtimeChunk: 'single',
-      splitChunks: {
-        cacheGroups: {
-          vendor: {
-            chunks: 'all',
-            name: 'vendor',
-            test: /[\\/]node_modules[\\/]/,
-            enforce: true,
-          },
+        {
+          test: /\.(png|jpg|gif)$/,
+          exclude: /node_modules/,
+          type: 'asset/resource',
         },
-      },
+      ],
     },
     plugins: [
       new HtmlWebpackPlugin({

front/config/webpack/dev.js

@@ -1,46 +1,36 @@
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const Dotenv = require('dotenv-webpack');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const base = require('./base');
-const helpers = require('./helpers');
 
-const hotReloadingEntries = ['react-hot-loader/patch'];
-
-module.exports = merge.strategy({
-  entry: 'prepend',
-})(base, {
+module.exports = merge(base, {
   mode: 'development',
-  devtool: 'inline-source-map',
-  resolve: {
-    alias: {
-      'react-dom': '@hot-loader/react-dom',
-    },
-  },
-  entry: {
-    app: hotReloadingEntries,
-  },
+  devtool: 'eval-source-map',
   output: {
-    path: helpers.resolveFromRootPath('dist'),
     filename: '[name].js',
   },
   devServer: {
-    inline: true,
     host: 'localhost',
     port: 8080,
-    stats: 'minimal',
     hot: true,
+    historyApiFallback: true,
+    proxy: {
+      '/api': 'http://localhost:3001',
+    },
+    devMiddleware: {
+      stats: 'errors-warnings',
+    },
   },
-  plugins: [
-    new Dotenv({
-      path: 'dev.env',
-    }),
-  ],
   module: {
     rules: [
       {
-        test: /\.(png|jpg|gif|svg)$/,
-        loader: 'file-loader',
-        options: {
-          name: 'img/[name].[ext]',
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            plugins: [require.resolve('react-refresh/babel')],
+          },
         },
       },
       {
@@ -49,4 +39,10 @@ module.exports = merge.strategy({
       },
     ],
   },
+  plugins: [
+    new ReactRefreshWebpackPlugin(),
+    new Dotenv({
+      path: 'dev.env',
+    }),
+  ],
 });

front/config/webpack/prod.js

@@ -1,23 +1,33 @@
 const merge = require('webpack-merge');
 const Dotenv = require('dotenv-webpack');
 const base = require('./base');
-const helpers = require('./helpers');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = merge(base, {
   mode: 'production',
   output: {
-    path: helpers.resolveFromRootPath('dist'),
-    filename: './js/[name].[chunkhash].js',
+    filename: 'js/[name].[chunkhash].js',
+    assetModuleFilename: 'images/[hash][ext][query]',
+  },
+  optimization: {
+    runtimeChunk: 'single',
+    splitChunks: {
+      cacheGroups: {
+        vendor: {
+          chunks: 'all',
+          name: 'vendor',
+          test: /[\\/]node_modules[\\/]/,
+          enforce: true,
+        },
+      },
+    },
   },
   module: {
     rules: [
       {
-        test: /\.(png|jpg|gif|svg)$/,
-        loader: 'file-loader',
-        options: {
-          name: './images/[name].[ext]?[hash]',
-        },
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
       },
       {
         test: /\.css$/,