# Webpack

> Webpack module bundler with loaders and plugins. Use for bundling.

- Skill: `g1joshi/webpack` (Agent Skill)
- Install (CLI): `npx skillmds@latest add g1joshi/webpack`
- Raw SKILL.md: https://api.skillmd.com/api/skills/g1joshi/webpack/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: G1Joshi (https://skillmd.com/u/g1joshi)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/g1joshi/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/)