webpack.config.js

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ChangeDataColors = require("./changeDataColors.js");

const COLOR_KEYS = ["color", "bgColor", "fillcolor"];

const transformDataColors = async (data, path) => {
    const {getNamedColor} = await import('./src/colors.mjs');
    // if not json file, return
    if (!path.endsWith(".json")) {
        return data;
    }
    console.log(path)
    const parsedData = JSON.parse(data);
    // Change the color of the data
    const deepIterateAndSetColor = (obj) => {
        Object.keys(obj).forEach((key) => {
            if (typeof obj[key] === "object" && obj[key] !== null) {
                deepIterateAndSetColor(obj[key]);
            } else if (COLOR_KEYS.includes(key)) {
                // The color is always in format color opacity
                const [colorName, opacity] = obj[key].trim().split(/\s+/);
                console.log(`key: ${key} in file ${path} changed to ${getNamedColor(colorName, parseFloat(opacity))}`);
                obj[key] = getNamedColor(colorName, parseFloat(opacity));
            }
        });
    };

    deepIterateAndSetColor(parsedData);
    return JSON.stringify(parsedData);
};

module.exports = {
    infrastructureLogging: {
        level: 'verbose',
    },
    entry: "./src/index.js", // Your main JavaScript file
    output: {
        filename: "bundle.js", // The output file
        path: path.resolve(__dirname, "dist"), // Output directory
    },
    module: {
        rules: [
            { test: /\.css$/, use: ["style-loader", "css-loader"] },
            {
                test: /\.(js|mjs)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"],
                    },
                },
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./src/index.html", // Path to your source template
            filename: "index.html", // Optional: specify a filename (defaults to index.html)
        }),
        new CopyPlugin({
            patterns: [
                {
                    from: "assets",
                    to: "assets",
                    transform: transformDataColors,
                },
                { from: "src/style.css", to: "style.css" },
                { from: "src/bibliography.bib", to: "bibliography.bib" },
            ],
        }),
    ],
    devtool: process.env.NODE_ENV === 'production' ? 'source-map' : 'eval-source-map',
    devServer: {
        static: "./dist", // Serve files from the 'dist' directory
        open: process.env.NODE_ENV !== 'production', // Automatically open the browser unless in production
        hot: process.env.NODE_ENV !== 'production', // Enable hot module replacement unless in production
    },
    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
};