Webpack Externals & CDN Script Tag Generator

Overview

This single-file utility provides frontend developers with a clean, responsive interface to generate externals objects for webpack.config.js and the corresponding <script> tags for their HTML templates. It streamlines the process of offloading large dependencies to CDNs to improve bundle performance.

Technical Specifications

• Architecture: Single HTML file containing CSS and Vanilla JavaScript.
• State Management: All data (package list, configurations) must be held in an in-memory JavaScript array/object. DO NOT use localStorage or sessionStorage.
• Compatibility: Must run in a sandboxed iframe. Use custom modals for interactions instead of alert() or confirm().
• Performance: High-speed, instantaneous UI updates using CSS transitions (300ms).

UI Layout

• Header: Clean, minimalist branding-free title with a brief description.
• Input Section: A responsive grid containing inputs for:
  • Package Name (e.g., react)
  • Version (e.g., 18.2.0)
  • Global Variable Name (e.g., React)
  • CDN Selection (Dropdown: unpkg, jsdelivr, cdnjs)
  • "Add to List" Action Button.
• Management Area: A table or card-based list showing added packages with "Delete" actions.
• Output Section: Two distinct code-block containers (using monospace font) for:
  • Webpack Configuration Object (Syntax-highlighted simulated via CSS).
  • HTML Script Tags.
  • "Copy to Clipboard" buttons for each section.

Design & Aesthetics

• Color Palette:
  • Background: #f8fafc (Slate 50)
  • Surface: #ffffff (White) with soft box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1).
  • Primary Accent: #2563eb (Blue 600) for buttons and primary actions.
  • Text: #1e293b (Slate 800) for headers, #475569 (Slate 600) for body.
  • Code Blocks: #0f172a (Slate 900) background for high contrast code display.
• Typography: Sans-serif, system-ui (Inter/Roboto/system-ui fallback).
• Transitions: Smooth fading animations when adding or removing items from the list.

Developer Directives

1. No External Frameworks: Use standard DOM API for rendering. Tailwind CSS via CDN is permitted.
2. Security: Ensure all generated output is properly escaped. Do not execute any user input.
3. Responsive: Stack inputs on mobile; display tables horizontally on screens larger than 768px.
4. No Storage: State is entirely volatile. If the user refreshes the page, the data resets. This is the intended behavior.
5. UX: Add a visual "Copied!" indicator (toast notification) when the user clicks the copy button.