const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");

module.exports = [
    // Demo bundle (for demo only, not part of the library)
    {
        entry: {
            app: "./demo/demo.js",
        },
        output: {
            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"),
                dist: path.resolve(__dirname, "dist")
            }
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: ["style-loader", "css-loader"]
                },
                {
                    test: /\.(woff|woff2|eot|ttf|svg)$/,
                    type: "asset/resource",
                    generator: {
                        filename: "fonts/[name][ext]"
                    }
                }
            ]
        }
    },
    
    // X-Editable Plugin (Bootstrap 5)
    {
        entry: "./src/bootstrap5-editable.js",
        output: {
            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: {
            alias: {
                jquery: path.resolve(__dirname, "node_modules/jquery"),
                bootstrap: path.resolve(__dirname, "node_modules/bootstrap")
            }
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    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")
                    }
                ]
            })
        ]
    }
];