# Webpack > Webpack module bundler with loaders and plugins. Use for bundling. Use when this capability is needed. - Skill: `tomevault-io/webpack` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/webpack` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/webpack/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: AI & ML - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/webpack --- # Webpack Webpack is the grandfather of bundlers. While slower than Vite, it offers unparalleled **flexibility** and remains the engine behind Next.js (legacy), Angular, and enterprise apps. ## When to Use - **Complex Federation**: Module Federation (Micro-frontends) is best in Webpack / Rspack. - **Legacy Apps**: Migrating a massive app to Vite might be too costly. - **Granular Control**: You need to control every byte of the chunk splitting algorithm. ## Core Concepts ### Loaders Transform files. `ts-loader`, `css-loader`, `file-loader`. ### Plugins Tap into the build lifecycle. `HtmlWebpackPlugin`, `DefinePlugin`. ### Module Federation Allows a JavaScript application to dynamically load code from another application. ## Best Practices (2025) **Do**: - **Consider Rspack**: If Webpack is too slow, Rspack is a Rust-based drop-in replacement. - **Use `swc-loader`**: Replace `babel-loader` with `swc-loader` for 20x speedup. **Don't**: - **Don't start new projects with it**: Use Vite or generic frameworks (Next.js) instead. ## References - [Webpack Documentation](https://webpack.js.org/) --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/g1joshi) — claim your Tome and manage your conversions.