skills.rest
jcg-admin
jcg-adminCOMMUNITY
Explore all skills by this author →
GitHub

frontend-webpack

Guides Webpack build configuration, bundle analysis, and optimization across phased development workflows.

Updated Mar 14, 2026
Search Tags:#frontend#plugins#bundle analysis#webpack#bundling#loaders#build pipeline
One-click install
npx skills add https://github.com/jcg-admin/IACT-ui --skill frontend-webpack-jcg-admin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-webpack
Source: https://github.com/jcg-admin/IACT-ui/tree/main/.claude/skills/frontend-webpack
Command: npx skills add https://github.com/jcg-admin/IACT-ui --skill frontend-webpack-jcg-admin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It provides structured, phase-by-phase guidance for working with Webpack build pipelines, helping developers diagnose configuration issues, specify build changes, implement them safely, and audit bundle output. ## Core Features & Use Cases - Build Diagnosis: Reviews webpack.config.js, active loaders, plugins, and current bundle size using webpack-bundle-analyzer. - Implementation Conventions: Defines an ordered workflow for modifying shared, dev, and production Webpack configs with verification builds at each step. - Bundle Auditing: Checks production bundle growth, duplicate modules, source map configuration, and leaked environment variables. - Use Case: When adding a new feature that requires a new file type, use this Skill to specify the required loader, update webpack.common.js, verify both dev and prod builds, and confirm the bundle did not grow more than 10%. ## Quick Start Ask the assistant to review the current Webpack configuration and analyze the production bundle size for regressions.

Frequently Asked Questions about frontend-webpack

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I analyze Webpack bundle size?▼

Run webpack with the --json flag and pipe the output to webpack-bundle-analyzer, or run npx webpack-bundle-analyzer on the dist directory after a production build. This visualizes module sizes and helps detect duplicates.

How to structure Webpack config for dev and production?▼

Keep shared settings in webpack.common.js and environment-specific settings in webpack.dev.js and webpack.prod.js. Modify the common file for shared changes first, then adjust environment files, verifying each with npx webpack --mode development or production.

Does DefinePlugin expose sensitive environment variables?▼

Yes, values injected with DefinePlugin are embedded directly into the bundle and publicly visible. Only inject public values, and audit the production bundle to confirm no sensitive variables were included.

Why is my Webpack bundle growing unexpectedly?▼

Unexpected growth usually comes from duplicated modules, missing code splitting, or newly added dependencies. Use webpack-bundle-analyzer to find duplicates and treat growth over 10 percent without justification as a regression.

What source map setting should production Webpack builds use?▼

Production builds should use hidden-source-map so maps are generated for debugging but not referenced in shipped files. Verify this setting during the final build audit before release.

Related Skills

Explore More Software Engineering Skills→
partme-aipartme-ai
610

webpack

Configure Webpack bundlers with loaders, plugins, and code splitting.

Official
Intermediate
shhubbhshhubbh
1

land-and-deploy

Merge PRs, wait for CI, deploy to production, and verify health via canary checks.

Community
Advanced
BluMintIncBluMintInc
2

jest

Generate Jest test suites for ESLint rules in TypeScript projects.

Official
Intermediate
lespacemanlespaceman
4

router-plugin

Automate file-based routing and code splitting for TanStack Router across Vite, Webpack, Rspack, and esbuild.

Community
Intermediate