WIP: ES6 module conversion and webpack refactoring

- Convert all IIFE modules to ES6 modules with attach functions
- Split webpack configs: lib build vs demo build
- Add UMD wrapper for auto-initialization with jQuery
- Update package.json with sequential build scripts
- Clean up legacy dist files and reorganize demo structure

Status: jQuery timing issues remain - attach functions not accessible
Next: Debug UMD factory execution and jQuery parameter passing

webpack.config.js

@@ -3,21 +3,21 @@ const CopyWebpackPlugin = require("copy-webpack-plugin");
 const path = require("path");
 
 module.exports = [
-    // Main bundle (jQuery, Bootstrap, App)
+    // Demo bundle (for demo only, not part of the library)
     {
         entry: {
-            jquery: "jquery",
             app: "./demo/demo.js",
         },
         output: {
-            path: path.resolve(__dirname, "dist"), // Place them directly in dist/
-            filename: "[name].js", // app.js, jquery.js, bootstrap.js
+            path: path.resolve(__dirname, "demo/dist"), // Place in demo/dist folder
+            filename: "[name].js", // app.js
+            clean: true // Clean the demo/dist directory before emit
         },
         resolve: {
             alias: {
                 jquery: path.resolve(__dirname, "node_modules/jquery"),
                 bootstrap: path.resolve(__dirname, "node_modules/bootstrap"),
-                "bootstrap5-editable": path.resolve(__dirname, "dist/bootstrap5-editable")
+                dist: path.resolve(__dirname, "dist")
             }
         },
         module: {
@@ -34,32 +34,34 @@ module.exports = [
                     }
                 }
             ]
-        },
-        plugins: [
-            new webpack.ProvidePlugin({
-                $: "jquery",
-                jQuery: "jquery",
-                "window.jQuery": "jquery",
-                bootstrap: "bootstrap",
-                "window.bootstrap": "bootstrap"
-            }),
-            new CopyWebpackPlugin({
-                patterns: [
-                    { from: "src/editable-form/editable-form.css", to: path.resolve(__dirname, "dist/bootstrap5-editable/css") },
-                ]
-            })
-        ]
+        }
     },
-
+    
     // X-Editable Plugin (Bootstrap 5)
     {
         entry: "./src/bootstrap5-editable.js",
         output: {
-            path: path.resolve(__dirname, "dist/bootstrap5-editable/js"), // X-Editable stays here
+            path: path.resolve(__dirname, "dist/bootstrap5-editable/js"),
             filename: "bootstrap-editable.js",
             library: {
                 name: "EditableForm",
                 type: "umd"
+            },
+            globalObject: "this",
+            clean: true // Clean the output directory before emit
+        },
+        externals: {
+            jquery: {
+                commonjs: "jquery",
+                commonjs2: "jquery", 
+                amd: "jquery",
+                root: "jQuery"
+            },
+            bootstrap: {
+                commonjs: "bootstrap",
+                commonjs2: "bootstrap",
+                amd: "bootstrap", 
+                root: "bootstrap"
             }
         },
         resolve: {
@@ -75,6 +77,20 @@ module.exports = [
                     use: ["style-loader", "css-loader"]
                 }
             ]
-        }
+        },
+        plugins: [
+            new CopyWebpackPlugin({
+                patterns: [
+                    { 
+                        from: "src/editable-form/editable-form.css", 
+                        to: path.resolve(__dirname, "dist/bootstrap5-editable/css/bootstrap-editable.css") 
+                    },
+                    {
+                        from: "src/img",
+                        to: path.resolve(__dirname, "dist/bootstrap5-editable/img")
+                    }
+                ]
+            })
+        ]
     }
 ];