webpack.js

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const baseManifest = require("./chrome/manifest.json");
const { buildManifest } = require("./chrome/buildManifest");
const WebpackExtensionManifestPlugin = require("webpack-extension-manifest-plugin");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = (env = {}, argv) => {
  const isProduction = argv.mode === "production";
  const isDevelopment = argv.mode === "development";
  const target = env.target === "firefox" ? "firefox" : "chrome";

  return {
    mode: argv.mode,
    
    // Development: fast rebuilds with inline source maps
    // Production: external source maps (can be disabled for release)
    devtool: isDevelopment 
      ? 'cheap-module-source-map' 
      : (env.sourcemap !== 'false' ? 'source-map' : false),
    
    entry: {
      app: path.join(__dirname, "./static/index.js"),
      fullpage: path.join(__dirname, "./static/fullpage.js"),
    },
    
    output: {
      path: path.resolve(__dirname, target === "firefox" ? "./build-firefox" : "./build"),
      // Content-hash entry/chunk filenames in production so Chrome can't serve
      // a stale cached bundle across extension reloads (the JS carries the
      // injected CSS, so unhashed names caused reloads to keep old styles).
      // Dev keeps stable names (watch rewrites them; HTML uses ?hash busting).
      filename: isProduction ? "[name].[contenthash].js" : "[name].js",
      chunkFilename: isProduction ? "[name].[contenthash].js" : "[name].js",
      clean: true, // Clean build folder before each build
    },
    
    resolve: {
      extensions: ["*", ".js"],
    },
    
    optimization: {
      minimize: isProduction,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            parse: {
              ecma: 2020,
            },
            compress: {
              ecma: 2020,
              comparisons: false,
              inline: 2,
              drop_console: isProduction && env.drop_console === 'true',
              drop_debugger: isProduction,
              pure_funcs: isProduction ? ['console.log'] : [],
            },
            mangle: {
              safari10: true,
            },
            output: {
              ecma: 2020,
              comments: false,
              ascii_only: true,
            },
          },
          extractComments: false, // Don't create separate LICENSE.txt files
        }),
      ],
      
      // Enable module concatenation (scope hoisting) for smaller bundles
      concatenateModules: isProduction,
      
      // Use deterministic IDs for better caching and consistent builds
      moduleIds: 'deterministic',
      chunkIds: 'deterministic',
      
      // Split vendor code into separate chunks for better caching
      splitChunks: isProduction ? {
        chunks: 'all',
        maxInitialRequests: 25,
        minSize: 20000,
        cacheGroups: {
          // Group React and related packages
          react: {
            test: /[\\/]node_modules[\\/](react|react-dom|scheduler)[\\/]/,
            name: 'vendor-react',
            chunks: 'all',
            priority: 40,
          },
          // Group UI libraries
          ui: {
            test: /[\\/]node_modules[\\/](react-icons|react-modal|react-select|react-tooltip|react-tiny-popover|react-hot-toast|react-time-ago)[\\/]/,
            name: 'vendor-ui',
            chunks: 'all',
            priority: 30,
          },
          // Group drag-and-drop libraries
          dnd: {
            test: /[\\/]node_modules[\\/]@dnd-kit[\\/]/,
            name: 'vendor-dnd',
            chunks: 'all',
            priority: 30,
          },
          // Remaining vendor modules
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all',
            priority: 10,
          },
        },
      } : undefined,
      
      // Keep runtime chunk inline in app.js for Chrome extensions
      runtimeChunk: false,
    },
    
    // Disable performance warnings - not relevant for Chrome extensions (local loading)
    performance: {
      hints: false,
    },
    
    // All target browsers have globalThis; without this webpack injects a
    // `new Function("return this")` shim that AMO's validator flags as eval.
    node: { global: false },

    plugins: [
      new webpack.DefinePlugin({ global: "globalThis" }),
      new HtmlWebpackPlugin({
        title: "Tabox - Tab Manager, Save & Share Tab Groups",
        meta: {
          charset: "utf-8",
          viewport: "width=device-width, initial-scale=1, shrink-to-fit=no",
          "theme-color": "#000000"
        },
        filename: "index.html",
        template: "./static/index.html",
        chunks: ['app'],
        hash: !isProduction, // Only add hash in development for cache busting
        minify: isProduction ? {
          removeComments: true,
          collapseWhitespace: true,
          removeRedundantAttributes: true,
          useShortDoctype: true,
          removeEmptyAttributes: true,
          removeStyleLinkTypeAttributes: true,
          keepClosingSlash: true,
          minifyJS: true,
          minifyCSS: true,
          minifyURLs: true,
        } : false,
      }),
      new HtmlWebpackPlugin({
        title: "Tabox - Full Page View",
        meta: {
          charset: "utf-8",
          viewport: "width=device-width, initial-scale=1, shrink-to-fit=no",
          "theme-color": "#000000"
        },
        filename: "fullpage.html",
        template: "./static/fullpage.html",
        chunks: ['fullpage'],
        hash: !isProduction,
        minify: isProduction ? {
          removeComments: true,
          collapseWhitespace: true,
          removeRedundantAttributes: true,
          useShortDoctype: true,
          removeEmptyAttributes: true,
          removeStyleLinkTypeAttributes: true,
          keepClosingSlash: true,
          minifyJS: true,
          minifyCSS: true,
          minifyURLs: true,
        } : false,
      }),
      new CopyPlugin({
        patterns: [
          { from: "chrome/icons", to: "icons", globOptions: { ignore: ["**/.DS_Store"] } },
          { from: "static/images", to: "images", globOptions: { ignore: ["**/.DS_Store"] } },
          { from: "static/globals.js", to: "[name][ext]" },
          { from: "static/deferedLoading.*", to: "[name][ext]" },
          { from: "chrome/*.js", to: "[name][ext]", globOptions: { ignore: ["**/buildManifest.js"] } },
          {
            from: 'node_modules/webextension-polyfill/dist/browser-polyfill.min.*',
            to: "[name][ext]"
          }
        ]
      }),
      new WebpackExtensionManifestPlugin({
        config: {
          base: buildManifest(baseManifest, target)
        }
      })
    ],
    
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              cacheDirectory: true, // Cache babel compilations for faster rebuilds
              cacheCompression: false, // Faster cache without compression
            }
          }
        },
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"]
        },
        {
          test: /\.(png|jpg|gif)$/i,
          type: 'asset/resource'
        }
      ]
    },
    
    // Cache for faster subsequent builds
    cache: {
      type: 'filesystem',
      buildDependencies: {
        config: [__filename],
      },
      name: `${isProduction ? 'production' : 'development'}-${target}`,
    },
    
    // Stats configuration for cleaner output
    stats: isProduction ? {
      assets: true,
      chunks: false,
      modules: false,
      entrypoints: true,
      warnings: true,
      errors: true,
      errorDetails: true,
    } : 'normal',
  };
};