Update package dependencies and tweak webpack configuration

The package.json dependencies and devDependencies have been updated to their newer versions. Simultaneously, the webpack.config.ts has been adjusted to better suit the new dependencies, offering up-to-date compatibility and improved webpack configuration for managing assets.

Author: Alexey Ivanov

package.json

@@ -9,44 +9,44 @@
     ]
   },
   "dependencies": {
+    "eslint": "8",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/plugin-transform-runtime": "^7.14.3",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-react": "^7.12.10",
-    "@babel/preset-typescript": "^7.12.7",
-    "@babel/runtime": "^7.12.5",
-    "@types/node": "^15.12.1",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/webpack": "^5.28.0",
-    "@types/webpack-dev-server": "=3.11.1",
-    "@typescript-eslint/eslint-plugin": "^4.11.1",
-    "@typescript-eslint/parser": "^4.11.1",
-    "babel-loader": "^8.2.2",
-    "clean-webpack-plugin": "^4.0.0-alpha.0",
-    "css-loader": "^5.2.6",
-    "eslint": "^7.28.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-sonarjs": "^0.8.0-125",
-    "eslint-webpack-plugin": "^2.4.1",
-    "fork-ts-checker-webpack-plugin": "^6.0.8",
-    "html-webpack-plugin": "^5.3.1",
-    "husky": "^6.0.0",
-    "lint-staged": "^11.0.0",
-    "prettier": "^2.3.1",
-    "style-loader": "^2.0.0",
-    "ts-node": "^10.0.0",
-    "typescript": "^4.3.2",
-    "webpack": "^5.76.0",
-    "webpack-cli": "^4.3.1",
-    "webpack-dev-server": "^3.11.1"
+    "@babel/core": "^7.24.5",
+    "@babel/plugin-transform-runtime": "^7.24.3",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@babel/runtime": "^7.24.5",
+    "@types/node": "^20.12.12",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "@types/webpack": "^5.28.5",
+    "@types/webpack-dev-server": "4.7.2",
+    "@typescript-eslint/eslint-plugin": "^7.9.0",
+    "@typescript-eslint/parser": "^7.9.0",
+    "babel-loader": "^9.1.3",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^7.1.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-sonarjs": "^1.0.3",
+    "eslint-webpack-plugin": "^4.1.0",
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
+    "html-webpack-plugin": "^5.6.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
+    "style-loader": "^4.0.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.5",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
   },
   "scripts": {
     "start": "webpack serve --config webpack.config.ts",

webpack.config.ts

@@ -4,75 +4,75 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import ESLintPlugin from 'eslint-webpack-plugin';
 import { Configuration, HotModuleReplacementPlugin } from 'webpack';
 
+interface ConfigurationDevServer extends Configuration {
+    devServer?: any;
+}
+
 const isProd = process.env.NODE_ENV === "production";
 
-const config: Configuration = {
-  mode: isProd ? 'production' : 'development',
-  output: {
-    path: path.resolve(__dirname, 'build'),
-    filename: "[name].[contenthash].js",
-  },
-  entry: './src/index.tsx',
-  module: {
-    rules: [
-      {
-        test: /\.(ts|js)x?$/i,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: [
-              '@babel/preset-env',
-              '@babel/preset-react',
-              '@babel/preset-typescript',
-            ],
-          },
-        },
-      },
-      {
-        test: /\.css$/i,
-        use: ['style-loader', 'css-loader'],
-      },
-      {
-        test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
-        type: 'asset/resource',
-      },
-      {
-        test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
-        type: 'asset/inline',
-      },
+const config: ConfigurationDevServer = {
+    mode: isProd ? 'production' : 'development',
+    output: {
+        path: path.resolve(__dirname, 'build'),
+        filename: "[name].[contenthash].js",
+        assetModuleFilename: isProd ? "[hash][ext][query]" : "[name][ext]",
+    },
+    entry: './src/index.tsx',
+    module: {
+        rules: [
+            {
+                test: /\.(ts|js)x?$/i,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: [
+                            '@babel/preset-env',
+                            '@babel/preset-react',
+                            '@babel/preset-typescript',
+                        ],
+                    },
+                },
+            },
+            {
+                test: /\.css$/i,
+                use: ['style-loader', 'css-loader'],
+            },
+            {
+                test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
+                type: 'asset/resource',
+            },
+            {
+                test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
+                type: 'asset/inline',
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js'],
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: 'src/index.html',
+        }),
+        new HotModuleReplacementPlugin(),
+        new ForkTsCheckerWebpackPlugin({
+            async: false,
+        }),
+        new ESLintPlugin(),
     ],
-  },
-  resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: 'src/index.html',
-    }),
-    new HotModuleReplacementPlugin(),
-    new ForkTsCheckerWebpackPlugin({
-      async: false,
-    }),
-    new ESLintPlugin({
-      extensions: ['js', 'jsx', 'ts', 'tsx'],
-    }),
-  ],
-  devtool: 'inline-source-map',
-  devServer: {
-    contentBase: path.join(__dirname, 'build'),
-    historyApiFallback: true,
-    port: 4000,
-    open: true,
-    hot: true,
-    compress: true,
-    watchContentBase: true,
-  },
+    devtool: 'inline-source-map',
+    devServer: {
+        static: path.join(__dirname, 'build'),
+        historyApiFallback: true,
+        port: 4000,
+        open: true,
+        hot: true,
+        watchFiles: 'src/**/*',
+    },
 };
-
 if (isProd) {
     delete config.devtool;
     delete config.devServer;
 }
-
 export default config;