@ventum-digital/iiq-plugin-project-generator/templates/plugin/base/sources/frontend/webpack.config.js

A npm tool to set-up the project structure for developing an IIQ Plugin.

/*
 * Copyright (c) 2025 Ventum Consulting GmbH
 */

const path              = require('path');
const glob              = require("glob");
const WebpackObfuscator = require('webpack-obfuscator');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

let entries = {};

function addFiles(globPattern) {
  glob.sync(globPattern)
      .map(s => "./" + s)
      .forEach(file => {
        let name = path.basename(file, path.extname(file)); // Get file name without extension
        entries[name] = file; // Flatten output
      });
}

// Process JS files in the ./js folder
addFiles("./build/*.js");

module.exports = (env, argv) => {
  const isDevelopment = argv.mode === 'development';

  return {
    entry: entries,

    output: {
      path    : path.resolve(__dirname, 'dist'), // Output directory
      filename: '[name].js', // Output file name
      clean: true,                   // Clean the output folder before building
    },

    module: {
      rules: [
        {
          test: /\.((s[ac])|c)ss$/i,
          exclude: /node_modules/,
          use : [
            MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader",
          ],
        },
        {
          test   : /\.(js|jsx)$/, // Process JS/JSX files
          exclude: /node_modules/,
          use    : isDevelopment
                   ? undefined // Skip obfuscation in development
                   :
                   {
                     loader : WebpackObfuscator.loader,
                     options: {
                       rotateStringArray: true,
                     },
                   },
        },
        {
          test: /\.(png|jpg|gif|svg)$/, // Handle images
          type: 'asset/resource',
        },
      ].filter(Boolean), // Filter out undefined rules
    },

    plugins: [
      new MiniCssExtractPlugin({
        filename: "[name].css",
      }),
    ],

    devtool: isDevelopment ? 'source-map' : false, // Generate source maps only in development

    mode: isDevelopment ? 'development' : 'production',

    resolve: {
      alias: {
        /***  Use these lines as an example if you want to use import aliases   ****/
        /***  Each line needs a corresponding line the tsconfig.json 'paths' key ****/
        //  "components": path.resolve(__dirname, "build/components"),
        //  "controllers": path.resolve(__dirname, "build/controllers"),
        //  "pages": path.resolve(__dirname, "build/pages"),
        //  "css": path.resolve(__dirname, "css"),
      },
      extensions: [".ts", ".js", ".json"],
    },

    optimization: {
      usedExports: true,
      sideEffects: false,
    },

  };
};