webpack.dev.js

const path = require("path");
const APP = path.resolve(__dirname);
const { merge } = require("webpack-merge");
const commons = require("./webpack.common.js");
const fs = require("fs");

// Output to production location
const outPath = path.join(
   APP,
   "..",
   "..",
   "web",
   "assets",
   "ab_plugins",
   "ab_plugin_text_widget"
);

// Plugin to copy .js files as .mjs after compilation
class CopyAsMjsPlugin {
   apply(compiler) {
      compiler.hooks.afterEmit.tap("CopyAsMjsPlugin", (compilation) => {
         const outputPath = compilation.options.output.path;
         
         // Copy each .js file as .mjs
         Object.keys(compilation.assets).forEach((filename) => {
            if (filename.endsWith(".js")) {
               const jsPath = path.join(outputPath, filename);
               const mjsPath = path.join(outputPath, filename.replace(/\.js$/, ".mjs"));
               
               try {
                  fs.copyFileSync(jsPath, mjsPath);
                  console.log(`✓ Copied ${filename} → ${filename.replace(/\.js$/, ".mjs")}`);
               } catch (err) {
                  console.error(`✗ Failed to copy ${filename}:`, err.message);
               }
            }
         });

         // Also copy to dev/ subdirectory for backward compatibility
         const devPath = path.join(outputPath, "dev");
         if (!fs.existsSync(devPath)) {
            fs.mkdirSync(devPath, { recursive: true });
         }
         
         Object.keys(compilation.assets).forEach((filename) => {
            if (filename.endsWith(".js")) {
               const jsPath = path.join(outputPath, filename);
               const mjsDevPath = path.join(devPath, filename.replace(/\.js$/, ".mjs"));
               
               try {
                  fs.copyFileSync(jsPath, mjsDevPath);
                  console.log(`✓ Copied ${filename} → dev/${filename.replace(/\.js$/, ".mjs")}`);
               } catch (err) {
                  console.error(`✗ Failed to copy ${filename} to dev/:`, err.message);
               }
            }
         });
      });
   }
}

let configs = null;
let myChanges = {
   output: {
      path: outPath,
   },
   mode: "development",
   devtool: "source-map",
   plugins: [new CopyAsMjsPlugin()],
};

if (Array.isArray(commons)) {
   configs = commons.map((cfg) => merge(cfg, myChanges));
} else {
   configs = merge(commons, myChanges);
}
module.exports = configs;