diff --git a/health/micro-ui/web/console/webpack.config.js b/health/micro-ui/web/console/webpack.config.js
index 6f23f83c74..ca4a96c5ac 100644
--- a/health/micro-ui/web/console/webpack.config.js
+++ b/health/micro-ui/web/console/webpack.config.js
@@ -3,9 +3,8 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 
 module.exports = {
-  // mode: "development", // Uncomment for development
   entry: "./src/index.js",
-  devtool: "none", // Add "source-map" in development mode for debugging
+  devtool: "source-map", // Use "source-map" for development
   module: {
     rules: [
       {
@@ -19,31 +18,30 @@ module.exports = {
       },
       {
         test: /\.(png|jpe?g|gif|svg|woff2?|ttf|eot)$/i,
-        type: "asset", // Replaces file-loader for modern Webpack
-        parser: {
-          dataUrlCondition: {
-            maxSize: 8 * 1024, // Inline files smaller than 8 KB
+        use: [
+          {
+            loader: "file-loader",
+            options: {
+              name: "assets/[hash].[ext]",
+            },
           },
-        },
-        generator: {
-          filename: "assets/[hash][ext][query]", // Output assets in an organized folder
-        },
+        ],
       },
     ],
   },
   output: {
-    filename: "[name].[contenthash].js", // Use content hashes for caching
-    chunkFilename: "[name].[contenthash].js", // Dynamic imports use hashed filenames
+    filename: "[name].[contenthash].js",
+    chunkFilename: "[name].[contenthash].js",
     path: path.resolve(__dirname, "build"),
-    publicPath: "/console/", // Serve files from the correct base path
+    publicPath: "/console/",
   },
   optimization: {
-    runtimeChunk: "single", // Extract runtime into its own chunk
-    moduleIds: "deterministic", // Consistent hashes for modules
+    runtimeChunk: "single",
+    moduleIds: "hashed", // Compatible with Webpack 4.x
     splitChunks: {
       chunks: "all",
-      minSize: 30000, // Minimum size for a chunk (e.g., 30 KB)
-      maxSize: 250000, // Maximum size for a chunk (e.g., 250 KB)
+      minSize: 30000,
+      maxSize: 250000,
       minChunks: 1,
       maxAsyncRequests: 30,
       maxInitialRequests: 30,
@@ -52,23 +50,21 @@ module.exports = {
           test: /[\\/]node_modules[\\/]/,
           name: "vendors",
           chunks: "all",
-          priority: -10,
         },
         common: {
           test: /[\\/]src[\\/]/,
           name: "common",
           minChunks: 2,
-          priority: -20,
         },
       },
     },
   },
   plugins: [
-    new CleanWebpackPlugin(), // Cleans build folder before each build
+    new CleanWebpackPlugin(),
     new HtmlWebpackPlugin({
       inject: true,
-      template: "public/index.html", // Use the template file for the HTML
-      scriptLoading: "defer", // Load scripts with defer for better performance
+      template: "public/index.html",
+      scriptLoading: "defer",
     }),
   ],
 };