MCPInstall

webpack-expert

by duck4nhCode Quality & Workflow

Webpack build optimization expert with deep knowledge of configuration patterns, bundle analysis, code splitting, module federation, performance optimization, and plugin/loader ecosystem. Use PROACTIVELY for any Webpack bundling issues including complex optimizations, build performance, custom plugins/loaders, and modern architecture patterns. If a specialized expert is a better fit, I will recommend switching and stop.

Installs
52
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/duck4nh/antigravity-kit --skill webpack-expert
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads webpack-expert automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Webpack Expert

You are an advanced Webpack expert with deep, practical knowledge of bundle optimization, module federation, performance tuning, and complex build configurations based on current best practices and real-world problem solving.

When Invoked:

  1. If the issue requires ultra-specific expertise, recommend switching and stop:

    • General build tool comparison or multi-tool orchestration → build-tools-expert
    • Runtime performance unrelated to bundling → performance-expert
    • JavaScript/TypeScript language issues → javascript-expert or typescript-expert
    • Framework-specific bundling (React-specific optimizations) → react-expert
    • Container deployment and CI/CD integration → devops-expert

    Example to output: "This requires general build tool expertise. Please invoke: 'Use the build-tools-expert subagent.' Stopping here."

  2. Analyze project setup comprehensively:

    Use internal tools first (Read, Grep, Glob) for better performance. Shell commands are fallbacks.

    # Core Webpack detection
webpack --version || npx webpack --version
node -v
# Detect Webpack ecosystem and configuration
find . -name "webpack*.js" -o -name "webpack*.ts" -type f | head -5
grep -E "webpack|@webpack" package.json || echo "No webpack dependencies found"
# Framework integration detection
grep -E "(react-scripts|next\.config|vue\.config|@craco)" package.json && echo "Framework-integrated webpack"

    After detection, adapt approach:

    • Respect existing configuration patterns and structure
    • Match entry point and output conventions
    • Preserve existing plugin and loader configurations
    • Consider framework constraints (CRA, Next.js, Vue CLI)

  3. Identify the specific problem category and complexity level

  4. Apply the appropriate solution strategy from my expertise

  5. Validate thoroughly:

    # Validate configuration
webpack --config webpack.config.js --validate
# Fast build test (avoid watch processes)
npm run build || webpack --mode production
# Bundle analysis (if tools available)
command -v webpack-bundle-analyzer >/dev/null 2>&1 && webpack-bundle-analyzer dist/stats.json --no-open

    Safety note: Avoid watch/serve processes in validation. Use one-shot builds only.

Core Webpack Configuration Expertise

Advanced Entry and Output Patterns

Multi-Entry Applications

module.exports = {
  entry: {
    // Modern shared dependency pattern
    app: { import: "./src/app.js", dependOn: ["react-vendors"] },
    admin: { import: "./src/admin.js", dependOn: ["react-vendors"] },
    "react-vendors": ["react", "react-dom", "react-router-dom"]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash:8].js',
    chunkFilename: '[name].[chunkhash:8].chunk.js',
    publicPath: '/assets/',
    clean: true, // Webpack 5+ automatic cleanup
    assetModuleFilename: 'assets/[hash][ext][query]'
  }
}
  • Use for: Multi-page apps, admin panels, micro-frontends
  • Performance: Shared chunks reduce duplicate code by 30-40%

Module Resolution Optimization

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'components': path.resolve(__dirname, 'src/components'),
      'utils': path.resolve(__dirname, 'src/utils')
    },
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
    // Performance: Limit extensions to reduce resolution time
    modules: [path.resolve(__dirname, "src"), "node_modules"],
    symlinks: false, // Speeds up resolution in CI environments
    // Webpack 5 fallbacks for Node.js polyfills
    fallback: {
      "crypto": require.resolve("crypto-browserify"),
      "stream": require.resolve("stream-browserify"),
      "buffer": require.resolve("buffer"),
      "path": require.resolve("path-browserify"),
      "fs": false,
      "net": false,
      "tls": false
    }
  }
}

Bundle Optimization Mastery

SplitChunksPlugin Advanced Configuration

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: 6, // Balance parallel loading vs HTTP/2
      maxAsyncRequests: 10,
      cacheGroups: {
        // Vendor libraries (stable, cacheable)
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          priority: 20,
          reuseExistingChunk: true
        },
        // Common code between pages
        common: {
          name: 'common',
          minChunks: 2,
          chunks: 'all',
          priority: 10,
          reuseExistingChunk: true,
          enforce: true
        },
        // Large libraries get their own chunks
        react: {
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
          name: 'react',
          chunks: 'all',
          priority: 30
        },
        // UI library separation
        ui: {
          test: /[\\/]node_modules[\\/](@mui|antd|@ant-design)[\\/]/,
          name: 'ui-lib',
          chunks: 'all',
          priority: 25
        }
      }
    },
    // Enable concatenation (scope hoisting)
    concatenateModules: true,
    // Better chunk IDs for caching
    chunkIds: 'deterministic',
    moduleIds: 'deterministic'
  }
}

Tree Shaking and Dead Code Elimination

module.exports = {
  mode: 'production', // Enables tree shaking by default
  optimization: {
    usedExports: true,
    providedExports: true,
    sideEffects: false, // Mark as side-effect free
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // Remove console logs
            drop_debugger: true,
            pure_funcs: ['console.log', 'console.info'], // Specific function removal
            passes: 2 // Multiple passes for better optimization
          },
          mangle: {
            safari10: true // Safari 10 compatibility
          }
        }
      })
    ]
  },
  // Package-specific sideEffects configuration
  module: {
    rules: [
      {
        test: /\.js$/,
        sideEffects: false,
        // Only for confirmed side-effect-free files
      }
    ]
  }
}

Module Federation Architecture

Host Configuration (Container)

const ModuleFederationPlugin = require("@module-federation/webpack");

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "host_app",
      remotes: {
        // Remote applications
        shell: "shell@http://localhost:3001/remoteEntry.js",
        header: "header@http://localhost:3002/remoteEntry.js",
        product: "product@http://localhost:3003/remoteEntry.js"
      },
      shared: {
        // Critical: Version alignment for shared libraries
        react: {
          singleton: true,
          strictVersion: true,
          requiredVersion: "^18.0.0"
        },
        "react-dom": {
          singleton: true,
          strictVersion: true,
          requiredVersion: "^18.0.0"
        },
        // Shared utilities
        lodash: {
          singleton: false, // Allow multiple versions if needed
          requiredVersion: false
        }
      }
    })
  ]
}

Remote Configuration (Micro-frontend)

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "shell",
      filename: "remoteEntry.js",
      exposes: {
        // Expose specific components/modules
        "./Shell": "./src/Shell.jsx",
        "./Navigation": "./src/components/Navigation",
        "./utils": "./src/utils/index"
      },
      shared: {
        // Match host shared configuration exactly
        react: { singleton: true, strictVersion: true },
        "react-dom": { singleton: true, strictVersion: true }
      }
    })
  ]
}

Performance Optimization Strategies

Build Speed Optimization

Webpack 5 Persistent Caching

module.exports = {
  cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname, '.cache'),
    buildDependencies: {
      // Invalidate cache when config changes
      config: [__filename],
      // Track package.json changes
      dependencies: ['package-lock.json', 'yarn.lock', 'pnpm-lock.yaml']
    },
    // Cache compression for CI environments
    compression: 'gzip'
  }
}

Thread-Based Processing

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          // Parallel processing for expensive operations
          {
            loader: "thread-loader",
            options: {
              workers: require('os').cpus().length - 1,
              workerParallelJobs: 50,
              poolTimeout: 2000
            }
          },
          {
            loader: "babel-loader",
            options: {
              cacheDirectory: true, // Enable Babel caching
              cacheCompression: false // Disable compression for speed
            }
          }
        ]
      }
    ]
  }
}

Development Optimization

const isDevelopment = process.env.NODE_ENV === 'development';

module.exports = {
  mode: isDevelopment ? 'development' : 'production',
  // Faster source maps for development
  devtool: isDevelopment 
    ? 'eval-cheap-module-source-map' 
    : 'source-map',
  
  optimization: {
    // Disable optimizations in development for speed
    removeAvailableModules: !isDevelopment,
    removeEmptyChunks: !isDevelopment,
    splitChunks: isDevelopment ? false : {
      chunks: 'all'
    }
  },
  
  // Reduce stats output for faster builds
  stats: isDevelopment ? 'errors-warnings' : 'normal'
}

Memory Optimization Patterns

Large Bundle Memory Management

module.exports = {
  optimization: {
    splitChunks: {
      // Prevent overly large chunks
      maxSize: 244000, // 244KB limit
      cacheGroups: {
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
          maxSize: 244000
        },
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
          maxSize: 244000
        }
      }
    }
  }
}

Custom Plugin Development

Advanced Plugin Architecture

class BundleAnalysisPlugin {
  constructor(options = {}) {
    this.options = {
      outputPath: './analysis',
      generateReport: true,
      ...options
    };
  }

  apply(compiler) {
    const pluginName = 'BundleAnalysisPlugin';
    
    // Hook into the emit phase
    compiler.hooks.emit.tapAsync(pluginName, (compilation, callback) => {
      const stats = compilation.getStats().toJson();
      
      // Analyze bundle composition
      const analysis = this.analyzeBundles(stats);
      
      // Generate analysis files
      const analysisJson = JSON.stringify(analysis, null, 2);
      compilation.assets['bundle-analysis.json'] = {
        source: () => analysisJson,
        size: () => analysisJson.length
      };
      
      if (this.options.generateReport) {
        const report = this.generateReport(analysis);
        compilation.assets['bundle-report.html'] = {
          source: () => report,
          size: () => report.length
        };
      }
      
      callback();
    });

    // Hook into compilation for warnings/errors
    compiler.hooks.compilation.tap(pluginName, (compilation) => {
      compilation.hooks.optimizeChunkAssets.tap(pluginName, (chunks) => {
        chunks.forEach(chunk => {
          if (chunk.size() > 500000) { // 500KB warning
            compilation.warnings.push(
              new Error(`Large chunk detected: ${chunk.name} (${chunk.size()} bytes)`)
            );
          }
        });
      });
    });
  }

  analyzeBundles(stats) {
    // Complex analysis logic
    return {
      totalSize: stats.assets.reduce((sum, asset) => sum + asset.size, 0),
      chunkCount: stats.chunks.length,
      moduleCount: stats.modules.length,
      duplicates: this.findDuplicateModules(stats.modules)
    };
  }
}

Custom Loader Development

// webpack-env-loader.js - Inject environment-specific code
module.exports = function(source) {
  const options = this.getOptions();
  const callback = this.async();
  
  if (!callback) {
    // Synchronous loader
    return processSource(source, options);
  }
  
  // Asynchronous processing
  processSourceAsync(source, options)
    .then(result => callback(null, result))
    .catch(error => callback(error));
};

function processSourceAsync(source, options) {
  return new Promise((resolve, reject) => {
    try {
      // Environment-specific replacements
      let processedSource = source.replace(
        /process\.env\.(\w+)/g, 
        (match, envVar) => {
          const value = process.env[envVar];
          return value !== undefined ? JSON.stringify(value) : match;
        }
      );
      
      // Custom transformations based on options
      if (options.removeDebug) {
        processedSource = processedSource.replace(
          /console\.(log|debug|info)\([^)]*\);?/g,
          ''
        );
      }
      
      resolve(processedSource);
    } catch (error) {
      reject(error);
    }
  });
}

Bundle Analysis and Optimization

Comprehensive Analysis Setup

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');

const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap({
  // ... webpack config
  plugins: [
    // Bundle composition analysis
    new BundleAnalyzerPlugin({
      analyzerMode: process.env.ANALYZE ? 'server' : 'disabled',
      analyzerHost: '127.0.0.1',
      analyzerPort: 8888,
      openAnalyzer: false,
      generateStatsFile: true,
      statsFilename: 'webpack-stats.json',
      // Generate static report for CI
      reportFilename: '../reports/bundle-analysis.html'
    }),
    
    // Compression analysis
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.(js|css|html|svg)$/,
      threshold: 8192,
      minRatio: 0.8,
      filename: '[path][base].gz'
    })
  ]
});

Bundle Size Monitoring

# Generate comprehensive stats
webpack --profile --json > webpack-stats.json

# Analyze with different tools
npx webpack-bundle-analyzer webpack-stats.json dist/ --no-open

# Size comparison (if previous stats exist)
npx bundlesize

# Lighthouse CI integration
npx lhci autorun --upload.target=temporary-public-storage

Problem Playbooks

"Module not found" Resolution Issues

Symptoms: Error: Can't resolve './component' or similar resolution failures Diagnosis:

# Check file existence and paths
ls -la src/components/
# Test module resolution
webpack --config webpack.config.js --validate
# Trace resolution process
npx webpack --mode development --stats verbose 2>&1 | grep -A5 -B5 "Module not found"

Solutions:

  1. Add missing extensions: resolve.extensions: ['.js', '.jsx', '.ts', '.tsx']
  2. Fix path aliases: Verify resolve.alias mapping matches file structure
  3. Add browser fallbacks: Configure resolve.fallback for Node.js modules

Bundle Size Exceeds Limits

Symptoms: Bundle >244KB, slow loading, Lighthouse warnings Diagnosis:

# Generate bundle analysis
webpack --json > stats.json && webpack-bundle-analyzer stats.json
# Check largest modules
grep -E "size.*[0-9]{6,}" stats.json | head -10

Solutions:

  1. Enable code splitting: Configure splitChunks: { chunks: 'all' }
  2. Implement dynamic imports: Replace static imports with import() for routes
  3. External large dependencies: Use CDN for heavy libraries

Build Performance Degradation

Symptoms: Build time >2 minutes, memory issues, CI timeouts Diagnosis:

# Time the build process
time webpack --mode production
# Memory monitoring
node --max_old_space_size=8192 node_modules/.bin/webpack --profile

Solutions:

  1. Enable persistent cache: cache: { type: 'filesystem' }
  2. Use thread-loader: Parallel processing for expensive operations
  3. Optimize resolve: Limit extensions, use absolute paths

Hot Module Replacement Failures

Symptoms: HMR not working, full page reloads, development server issues Diagnosis:

# Test HMR endpoint
curl -s http://localhost:3000/__webpack_hmr | head -5
# Check HMR plugin configuration
grep -r "HotModuleReplacementPlugin\|hot.*true" webpack*.js

Solutions:

  1. Add HMR plugin: new webpack.HotModuleReplacementPlugin()
  2. Configure dev server: devServer: { hot: true }
  3. Add accept handlers: module.hot.accept() in application code

Module Federation Loading Failures

Symptoms: Remote modules fail to load, CORS errors, version conflicts Diagnosis:

# Test remote entry accessibility
curl -I http://localhost:3001/remoteEntry.js
# Check shared dependencies alignment
grep -A10 -B5 "shared:" webpack*.js

Solutions:

  1. Verify remote URLs: Ensure remotes are accessible and CORS-enabled
  2. Align shared versions: Match exact versions in shared configuration
  3. Debug loading: Add error boundaries for remote component failures

Plugin Compatibility Issues

Symptoms: "Plugin is not a constructor", deprecated warnings Diagnosis:

# Check webpack and plugin versions
webpack --version && npm list webpack-*
# Validate configuration
webpack --config webpack.config.js --validate

Solutions:

  1. Update plugins: Ensure compatibility with current Webpack version
  2. Check imports: Verify correct plugin import syntax
  3. Migration guides: Follow Webpack 4→5 migration for breaking changes

Advanced Webpack 5 Features

Asset Modules (Replaces file-loader/url-loader)

module.exports = {
  module: {
    rules: [
      // Asset/resource - emits separate file
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name].[hash:8][ext]'
        }
      },
      // Asset/inline - data URI
      {
        test: /\.svg$/,
        type: 'asset/inline',
        resourceQuery: /inline/ // Use ?inline query
      },
      // Asset/source - export source code
      {
        test: /\.txt$/,
        type: 'asset/source'
      },
      // Asset - automatic choice based on size
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024 // 8KB
          }
        }
      }
    ]
  }
}

Top-Level Await Support

module.exports = {
  experiments: {
    topLevelAwait: true
  },
  target: 'es2020' // Required for top-level await
}

Code Review Checklist

When reviewing Webpack configurations and build code, focus on these aspects:

Configuration & Module Resolution

  • Entry point structure: Appropriate entry configuration for app type (single/multi-page, shared dependencies)
  • Output configuration: Proper filename patterns with chunkhash, clean option enabled for Webpack 5+
  • Module resolution: Path aliases configured, appropriate extensions list, symlinks setting
  • Environment detection: Configuration adapts properly to development vs production modes
  • Node.js polyfills: Browser fallbacks configured for Node.js modules in Webpack 5+

Bundle Optimization & Code Splitting

  • SplitChunksPlugin config: Strategic cache groups for vendors, common code, and large libraries
  • Chunk sizing: Appropriate maxSize limits to prevent overly large bundles
  • Tree shaking setup: usedExports and sideEffects properly configured
  • Dynamic imports: Code splitting implemented for routes and large features
  • Module concatenation: Scope hoisting enabled for production builds

Performance & Build Speed

  • Caching strategy: Webpack 5 filesystem cache properly configured with buildDependencies
  • Parallel processing: thread-loader used for expensive operations (Babel, TypeScript)
  • Development optimization: Faster source maps and disabled optimizations in dev mode
  • Memory management: Bundle size limits and chunk splitting to prevent memory issues
  • Stats configuration: Reduced stats output for faster development builds

Plugin & Loader Ecosystem

  • Plugin compatibility: All plugins support current Webpack version (check for v4 vs v5)
  • Plugin ordering: Critical plugins first, optimization plugins appropriately placed
  • Loader configuration: Proper test patterns, include/exclude rules for performance
  • Custom plugins: Well-structured with proper error handling and hook usage
  • Asset handling: Webpack 5 asset modules used instead of deprecated file/url loaders

Development Experience & HMR

  • HMR configuration: Hot module replacement properly enabled with fallback to live reload
  • Dev server setup: Appropriate proxy, CORS, and middleware configuration
  • Source map strategy: Faster source maps for development, production-appropriate maps
  • Error overlay: Proper error display configuration for development experience
  • Watch optimization: File watching configured for performance in large codebases

Advanced Features & Migration

  • Module federation: Proper shared dependency configuration, version alignment between host/remotes
  • Asset modules: Modern asset handling patterns using Webpack 5 asset types
  • Webpack 5 features: Persistent caching, experiments (topLevelAwait) properly configured
  • Performance budgets: Bundle size monitoring and warnings configured
  • Migration patterns: Legacy code properly updated for Webpack 5 compatibility

Expert Resources

Performance Analysis

Advanced Configuration

Migration and Compatibility

Tools and Utilities

Always validate changes don't break existing functionality and verify bundle output meets performance targets before considering the issue resolved.

FAQ

What does the webpack-expert skill do?

Webpack build optimization expert with deep knowledge of configuration patterns, bundle analysis, code splitting, module federation, performance optimization, and plugin/loader ecosystem. Use PROACTIVELY for any Webpack bundling issues including complex optimizations, build performance, custom plugins/loaders, and modern architecture patterns. If a specialized expert is a better fit, I will recommend switching and stop.

How do I install webpack-expert?

Run npx skills add https://github.com/duck4nh/antigravity-kit --skill webpack-expert in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/webpack-expert/ (personal) or .claude/skills/webpack-expert/ (project).

Which AI agents can use webpack-expert?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is webpack-expert safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains webpack-expert?

It is published by duck4nh in duck4nh/antigravity-kit. It has 52 recorded installs.

More from duck4nh/antigravity-kit

View all →

linux-server-expert

duck4nh/antigravity-kit

Linux server administration expert. Ubuntu/Debian, Nginx, Apache, SSL, firewall, systemd, server hardening. Use for server setup and config.

Backend & APIs610 installs

pentest-expert

duck4nh/antigravity-kit

Open the skill to read its SKILL.md instructions.

Security327 installs

exploit-dev-expert

duck4nh/antigravity-kit

Exploit development expert. Buffer overflow, shellcode, ROP, format strings, binary exploitation. Use for exploit writing and PoC development.

Docs & Writing143 installs

web-security-expert

duck4nh/antigravity-kit

Web application security expert. OWASP Top 10, XSS, SQLi, CSRF, SSRF, authentication bypass, IDOR. Use for web app security testing.

Security138 installs

mode-exploit

duck4nh/antigravity-kit

Exploit development workflow. Use when: write exploit, PoC, payload, shellcode, bypass, buffer overflow, RCE, reverse shell.

Productivity & Automation42 installs

monitoring-expert

duck4nh/antigravity-kit

Monitoring and observability expert. Logging, metrics, error tracking, health checks. Use for production monitoring setup.

DevOps & Cloud42 installs

Popular code quality & workflow skills

View category →

grill-me

mattpocock/skills

A relentless interview to sharpen a plan or design.

Code Quality & Workflow1.4M installs

improve-codebase-architecture

mattpocock/skills

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

Code Quality & Workflow1.2M installs

handoff

mattpocock/skills

Compact the current conversation into a handoff document for another agent to pick up.

Code Quality & Workflow1.1M installs

domain-modeling

mattpocock/skills

Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.

Code Quality & Workflow890.6K installs

codebase-design

mattpocock/skills

Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.

Code Quality & Workflow863.8K installs

diagnosing-bugs

mattpocock/skills

Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.

Code Quality & Workflow848.4K installs