initial bundle draft

Signed-off-by: ravi_kumar_pilla <ravi_kumar_pilla@mckinsey.com>

src/utils/viz-entry.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import KedroViz from '../components/app/index';
+
+export { React, createRoot, KedroViz };

webpack.lib.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 // Bundle and inline web-workers
 module.exports = [
@@ -58,4 +59,43 @@ module.exports = [
       ],
     },
   },
+  {
+    mode: 'production',
+    entry: {
+        KedroViz: './src/utils/viz-entry.js', // Entry point for KedroViz
+    },
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: '[name].bundle.min.js',
+        library: 'KedroVizBundle', // Name of the UMD library
+        libraryTarget: 'umd', // UMD allows compatibility across environments
+        globalObject: 'this', // Ensures compatibility for both browsers and Node.js
+    },
+    module: {
+        rules: [
+          {
+            test: /\.(js|jsx)$/,
+            exclude: /node_modules/,
+            use: {
+              loader: 'babel-loader',
+              options: {
+                presets: ['@babel/preset-env', '@babel/preset-react'],
+              },
+            },
+          },
+          {
+            test: /\.scss$/,
+            use: [
+              'style-loader', // Injects styles into the DOM
+              'css-loader',   // Translates CSS into CommonJS
+              'sass-loader',  // Compiles SCSS to CSS
+            ],
+          },
+        ],
+      },
+    optimization: {
+      minimize: true,
+      minimizer: [new TerserPlugin()]
+    }
+}
 ];