Fixed copmonents

config/paths.js

@@ -1,7 +1,7 @@
-const path = require('path');
+const path = require("path");
 module.exports = {
-    public: path.resolve(__dirname, '../public'),
-    src: path.resolve(__dirname, '../src'),
-    build: path.resolve(__dirname, '../build'),
-    '@node_modules': path.resolve(__dirname, '../node_modules'),
+  public: path.resolve(__dirname, "../public"),
+  src: path.resolve(__dirname, "../src"),
+  build: path.resolve(__dirname, "../build"),
+  "@node_modules": path.resolve(__dirname, "../node_modules"),
 };

config/webpack/analyze.js

@@ -1,10 +1,10 @@
-const { merge } = require('webpack-merge');
+const { merge } = require("webpack-merge");
 
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
-    .BundleAnalyzerPlugin;
+const BundleAnalyzerPlugin =
+  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
 
-const prod = require('./prod');
+const prod = require("./prod");
 
 module.exports = merge(prod, {
-    plugins: [new BundleAnalyzerPlugin()]
-});
+  plugins: [new BundleAnalyzerPlugin()],
+});

config/webpack/dev.js

@@ -1,14 +1,14 @@
-const paths = require('../paths');
+const paths = require("../paths");
 
-const webpack = require('webpack');
-const {merge} = require('webpack-merge');
+const webpack = require("webpack");
+const { merge } = require("webpack-merge");
 
-const common = require('./common');
+const common = require("./common");
 
 module.exports = merge(common, {
-  target : 'web',
-  mode: 'development',
-  devtool: 'eval-cheap-source-map',
+  target: "web",
+  mode: "development",
+  devtool: "eval-cheap-source-map",
 
   devServer: {
     compress: true,
@@ -17,7 +17,6 @@ module.exports = merge(common, {
     historyApiFallback: true,
     // open: true,
     port: 3000,
-
   },
-  plugins: [new webpack.HotModuleReplacementPlugin()]
-});
+  plugins: [new webpack.HotModuleReplacementPlugin()],
+});

config/webpack/prod.js

@@ -1,62 +1,59 @@
-const paths = require('../paths');
-const {merge} = require('webpack-merge');
-const common = require('./common');
-
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const paths = require("../paths");
+const { merge } = require("webpack-merge");
+const common = require("./common");
 
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = merge(common, {
-    mode: 'production',
-    target :'browserslist',
-    entry: {
-        index: {
-            import: `${paths.src}/index.js`,
-            dependOn: ['react', 'helpers']
-        },
-        react: ['react', 'react-dom', 'prop-types'],
-        helpers: ['immer', 'nanoid']
+  mode: "production",
+  target: "browserslist",
+  entry: {
+    index: {
+      import: `${paths.src}/index.js`,
+      dependOn: ["react", "helpers"],
     },
-    devtool: false,
-    output: {
-        filename: 'js/[name].[hash:8].bundle.js',
-        publicPath: '/',
-        assetModuleFilename: '[hash][ext][query]'
-    },
-    module: {
-        rules: [
-            {
-                test: /\.(c|sa|sc)ss$/i,
-                use: [
-                    MiniCssExtractPlugin.loader,
-                    {
-                        loader: 'css-loader',
-                        options: {importLoaders: 1}
-                    },
-                    'postcss-loader',
-                    'sass-loader'
-                ]
-            },
-            {
-                test: /\.(jpe?g|png|gif|svg)$/i,
-                type: 'asset/resource'
-                // type: 'asset'
-            },
-
-        ]
-    },
-    plugins: [
-        new MiniCssExtractPlugin({
-            filename: '[name].[contenthash].css',
-            chunkFilename: '[id].css'
-        }),
-
+    react: ["react", "react-dom", "prop-types"],
+    helpers: ["immer", "nanoid"],
+  },
+  devtool: false,
+  output: {
+    filename: "js/[name].[hash:8].bundle.js",
+    publicPath: "/",
+    assetModuleFilename: "[hash][ext][query]",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(c|sa|sc)ss$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: "css-loader",
+            options: { importLoaders: 1 },
+          },
+          "postcss-loader",
+          "sass-loader",
+        ],
+      },
+      {
+        test: /\.(jpe?g|png|gif|svg|webp)$/i,
+        type: "asset/resource",
+        // type: 'asset'
+      },
     ],
-    optimization: {
-        runtimeChunk: 'single'
-    },
-    performance: {
-        hints: 'warning',
-        maxEntrypointSize: 512000,
-        maxAssetSize: 512000
-    }
-});
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: "[name].[contenthash].css",
+      chunkFilename: "[id].css",
+    }),
+  ],
+  optimization: {
+    runtimeChunk: "single",
+  },
+  performance: {
+    hints: "warning",
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000,
+  },
+});