fix split chunks in development

client/src/pages/Error.jsx

@@ -1,5 +1,4 @@
 import { Header } from "@/components/Header/Header";
-import { Outlet } from "react-router-dom";
 import { Footer } from "@/components/Footer/Footer";
 
 const Error = () => {

client/webpack-dev.config.js

@@ -1,12 +1,22 @@
+const path = require('path');
 const config = require('./webpack.config.js'); // Import your existing webpack config
 
 module.exports = {
   ...config,
   mode: 'development',
+  output: {
+    filename: 'bundle.js', // Static filename for development
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: '/', // Ensure this is set correctly
+  },
   devServer: {
     compress: true, // Enable gzip compression
     port: 3000, // Port to run dev server on
     hot: true, // Enable hot module replacement,
     historyApiFallback: true // This option is crucial for handling client-side routing
   },
+  optimization: {
+    ...config.optimization,
+    splitChunks: false, // Disable chunk splitting in dev
+  },
 };

client/webpack.config.js

@@ -8,7 +8,7 @@ module.exports = {
   mode: 'production',
   entry: './src/main.js',
   output: {
-    filename: 'bundle.js', // Use content hash for cache busting
+    filename: 'bundle.[contenthash].js', // Use content hash for cache busting
     path: path.resolve(__dirname, 'dist'),
   },
   module: {
@@ -45,7 +45,7 @@ module.exports = {
         { from: './public', to: '' }, // Copy all files from public directory to dist
       ],
     }),
-    // new CompressionPlugin()
+    new CompressionPlugin()
   ],
   resolve: {
     extensions: ['.js', '.jsx'],
@@ -54,21 +54,21 @@ module.exports = {
       '@public': path.resolve(__dirname, 'public'), // Alias for public folder
     }
   },
-  // optimization: {
-  //   minimize: true,
-  //   minimizer: [
-  //     new CssMinimizerPlugin(),
-  //     new TerserPlugin({
-  //       terserOptions: {
-  //         format: {
-  //           comments: false,
-  //         },
-  //       },
-  //       extractComments: false,
-  //     }),
-  //   ],
-  //   splitChunks: {
-  //     chunks: 'all',
-  //   },
-  // }
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new CssMinimizerPlugin(),
+      new TerserPlugin({
+        terserOptions: {
+          format: {
+            comments: false,
+          },
+        },
+        extractComments: false,
+      }),
+    ],
+    splitChunks: {
+      chunks: 'all',
+    },
+  }
 };