JavaScript Examples with Webpack

Relevant source files

• packages/js-example-selected-features/.gitignore
• packages/js-example-selected-features/README.md
• packages/js-example-selected-features/favicon.svg
• packages/js-example-selected-features/package.json
• packages/js-example-selected-features/webpack.config.js
• packages/js-example-without-defaults/.gitignore
• packages/js-example-without-defaults/favicon.svg
• packages/js-example-without-defaults/index.html
• packages/js-example-without-defaults/package.json
• packages/js-example-without-defaults/webpack.config.js
• packages/js-example/.gitignore
• packages/js-example/README.md
• packages/js-example/favicon.svg
• packages/js-example/package.json
• packages/js-example/webpack.config.js

Purpose and Scope

This document describes the three JavaScript example packages that demonstrate maxGraph integration using Webpack 5 as the build tool. These examples show different configuration patterns: standard integration with defaults, manual configuration without defaults, and selective feature registration for optimal tree-shaking. All three examples use vanilla JavaScript (no TypeScript) and demonstrate XML model import/decode using the Codec system.

For TypeScript integration with Vite, see TypeScript Examples with Vite. For server-side rendering, see Node.js Headless Integration.

---

Package Structure

The monorepo contains three JavaScript example packages in parallel directories:

Package	Directory	Purpose
@maxgraph/js-example-webpack	packages/js-example/	Standard integration with default plugins and styles
@maxgraph/js-example-webpack-without-defaults	packages/js-example-without-defaults/	Manual plugin and style configuration
@maxgraph/js-example-webpack-selected-features	packages/js-example-selected-features/	Selective registry imports for tree-shaking

Sources: packages/js-example/package.json1-21 packages/js-example-without-defaults/package.json1-21 packages/js-example-selected-features/package.json1-21

---

Webpack Configuration

All three examples use an identical Webpack configuration that provides:

• Entry point at ./src/index.js
• Content-hashed output filenames for cache busting
• CSS handling with mode-dependent loaders
• HTML template generation
• Static asset copying

Configuration Details

The Webpack configuration at packages/js-example/webpack.config.js10-37 implements:

• Entry: Single entry point at ./src/index.js packages/js-example/webpack.config.js12
• Output: Content-hashed filenames in dist/ directory with automatic cleaning packages/js-example/webpack.config.js13-16
• Dev Server: Serves from ./dist directory packages/js-example/webpack.config.js18-20
• CSS Handling: Uses style-loader in development for hot reload, MiniCssExtractPlugin.loader in production for extracted CSS files packages/js-example/webpack.config.js24-26
• Plugins:
  • CopyWebpackPlugin copies favicon.svg to output packages/js-example/webpack.config.js30-32
  • HtmlWebpackPlugin generates HTML from template packages/js-example/webpack.config.js33-35
  • MiniCssExtractPlugin extracts CSS in production mode packages/js-example/webpack.config.js36

The mode detection uses a process argument check: !process.argv.includes('--mode=production') packages/js-example/webpack.config.js8

Sources: packages/js-example/webpack.config.js1-38 packages/js-example-without-defaults/webpack.config.js1-38 packages/js-example-selected-features/webpack.config.js1-38

---

Dependencies and Build Tools

All three examples share identical devDependencies:

Dependency	Version	Purpose
webpack	~5.105.0	Module bundler
webpack-cli	~6.0.1	Command-line interface for Webpack
webpack-dev-server	~5.2.3	Development server with live reload
html-webpack-plugin	~5.6.6	HTML template generation
copy-webpack-plugin	~13.0.1	Static asset copying
mini-css-extract-plugin	~2.10.0	CSS extraction for production
css-loader	~7.1.3	CSS module processing
style-loader	~4.0.0	CSS injection for development
http-server	~14.1.1	Simple HTTP server for preview

Sources: packages/js-example/package.json9-19 packages/js-example-without-defaults/package.json9-19 packages/js-example-selected-features/package.json9-19

---

NPM Scripts

Each example package provides three scripts:

Script Definitions

From packages/js-example/package.json4-8:

• dev: Runs webpack serve --open to start development server and open browser
• build: Runs webpack --mode=production to create optimized production bundle
• preview: Runs http-server -c-1 dist to serve built application with cache disabled

Sources: packages/js-example/package.json4-8 packages/js-example-without-defaults/package.json4-8 packages/js-example-selected-features/package.json4-8

---

Example Comparison

The three examples demonstrate progressive optimization patterns:

Feature Matrix

Feature	js-example	js-example-without-defaults	js-example-selected-features
Graph class	Graph	Graph	Graph
Plugin registration	Automatic via getDefaultPlugins()	Manual in constructor	Manual in constructor
Shape registry	All default shapes	Explicit registration	Only used shapes
Style defaults	StyleDefaultsConfig	Custom defaults	Custom defaults
Edge markers	All registered	Explicit registration	Only used markers
Edge styles	All registered	Explicit registration	Only used styles
Perimeters	All registered	Explicit registration	Only used perimeters
Bundle optimization	No tree-shaking	Partial tree-shaking	Maximum tree-shaking
Codec usage	Import/decode XML	Import/decode XML	Import/decode XML

Sources: packages/js-example/README.md1-25 packages/js-example-selected-features/README.md1-37

---

Common Features

All three examples demonstrate:

XML Model Import with Codecs

The examples show how to import and decode XML graph models using the Codec system (see Codec System Architecture). This is compatible with mxGraph XML formats using mx-prefixed class names.

Graph Container Setup

Each example uses a standard HTML container pattern:

From packages/js-example-without-defaults/index.html12

Development Workflow

1. Initial Setup: From repository root, run npm install, build core package, navigate to example directory
2. Development: Run npm run dev to start webpack-dev-server at http://localhost:8080/
3. Production Build: Run npm run build to create optimized bundle in dist/
4. Preview: Run npm run preview to serve the bundled application

Sources: packages/js-example/README.md6-25 packages/js-example-selected-features/README.md18-37

---

Selective Feature Registration Example

The js-example-selected-features package demonstrates the most advanced pattern:

Demonstrated Features

From packages/js-example-selected-features/README.md7-12:

• Cell selection by mouse click or with RubberBandHandler
• Selected cell management
• Fit and zoom using buttons
• Panning with mouse drag

Registry Optimization

Instead of importing all registries, this example:

1. Imports only required shapes from ShapeRegistry
2. Registers only used perimeters in PerimeterRegistry
3. Registers only required edge markers in EdgeMarkerRegistry
4. Registers only needed edge styles in EdgeStyleRegistry

This approach enables Webpack to eliminate unused code during tree-shaking, resulting in smaller bundle sizes.

Sources: packages/js-example-selected-features/README.md1-37

---

File Structure

Each example package follows this structure:

Ignored Files

The .gitignore configuration excludes:

• /node_modules/ - npm dependencies
• /dist/ - build output
• package-lock.json - lock file (managed by workspace root)

From packages/js-example/.gitignore1-5

Sources: packages/js-example/.gitignore1-5 packages/js-example-without-defaults/.gitignore1-5 packages/js-example-selected-features/.gitignore1-5

---

Integration with Core Library

All examples depend on @maxgraph/core from the monorepo workspace:

The examples demonstrate how to import maxGraph in different patterns for varying levels of bundle optimization.

Sources: packages/js-example/README.md10-11

---

Build Output

Development Mode

In development mode (npm run dev):

• style-loader injects CSS into <style> tags for hot reload
• Source maps are generated
• No minification
• webpack-dev-server provides live reload at http://localhost:8080/

Production Mode

In production mode (npm run build):

• MiniCssExtractPlugin extracts CSS into separate files
• Content hashing applied: [name].[contenthash].js
• Minification and optimization enabled
• Output directory cleaned before build

From packages/js-example/webpack.config.js8-37

Sources: packages/js-example/webpack.config.js8-37

---

Relationship to TypeScript Examples

The JavaScript examples parallel the TypeScript examples at TypeScript Examples with Vite but differ in:

Aspect	JavaScript Examples	TypeScript Examples
Language	Vanilla JavaScript	TypeScript
Build Tool	Webpack 5	Vite 7
Dev Server	webpack-dev-server	Vite dev server
Port	8080	Varies by example
Type Safety	Runtime only	Compile-time checking
Module Resolution	Webpack resolution	Vite/Rollup resolution

Both sets of examples demonstrate the same three patterns: standard configuration, without defaults, and selective features.

Sources: packages/js-example/package.json1-21