# webpack-bundler

A skill that tells the agent how to write and fix Webpack configs: chunk splitting, tree shaking, loaders and plugins. Useful when your bundle grows or builds drag.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 802 installs · ★ 286
- Author: Mindrally
- License: Apache-2.0 · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/Mindrally/skills/tree/HEAD/webpack-bundler/SKILL.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/skills/webpack-bundler

## What it does

The skill sets rules for editing `webpack.config.js` and the code around it. It covers entry and output setup, `production` versus `development` mode, dynamic imports, and a `splitChunks` cache group that pulls `node_modules` into its own chunk.

Tree shaking gets its own section: ES module syntax, `sideEffects` in `package.json`, and `@babel/preset-env` with `modules: false`. Ready-made config blocks are included for `babel-loader`, `ts-loader`, `css-loader` with `style-loader`, `sass-loader`, and images handled by `asset/resource`. Among plugins it names `HtmlWebpackPlugin`, `MiniCssExtractPlugin` and `BundleAnalyzerPlugin`.

For build speed the skill points to a filesystem cache, `TerserPlugin` with `parallel`, and `runtimeChunk: 'single'`. Anti-patterns are listed outright: don't ship one giant file, don't import a whole library for a couple of functions, don't drop source maps during development. Some examples won't run unless `webpack-bundle-analyzer` and `terser-webpack-plugin` are already in your dependencies, so check `package.json` before letting the agent rewrite the config.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill webpack-bundler -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/webpack-bundler/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/webpack-bundler/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill webpack-bundler -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/webpack-bundler/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill webpack-bundler -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/webpack-bundler/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Mindrally/skills webpack-bundler
```

2. **Manually: put the files in place**
- File: `.github/skills/webpack-bundler/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill webpack-bundler -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Mindrally/skills --path webpack-bundler
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/webpack-bundler/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill webpack-bundler -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/Mindrally/skills/tree/HEAD/webpack-bundler/SKILL.md

## When to use it
- split the bundle into a vendor chunk and app code
- turn on tree shaking and drop dead code
- wire up loaders for SCSS and image files
- speed up rebuilds with a filesystem cache
- spot heavy dependencies with a bundle analyzer

## Example prompts
- Split the bundle: move everything from `node_modules` into a vendors chunk via `splitChunks`
- Why is tree shaking not working? Check `sideEffects` in `package.json` and the Babel setup
- Add `webpack-bundle-analyzer` to the config and show me what takes up the most space

## Source text · SKILL.md · Apache-2.0

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 7bc78672b6a860f9.

BEGIN THIRD-PARTY FILE 7bc78672b6a860f9
````text
---
name: webpack-bundler
description: Best practices and guidelines for Webpack module bundler configuration, optimization, and development workflows
metadata:
  maintainer: Mindrally
  source: https://github.com/Mindrally/skills
---

# Webpack Bundler

You are an expert in Webpack, the powerful module bundler for JavaScript applications. Follow these guidelines when working with Webpack configurations and related code.

## Core Principles

- Webpack is a static module bundler that builds a dependency graph from entry points
- Focus on optimal bundle size, build performance, and developer experience
- Use Webpack 5+ features for best practices and performance
- Understand the plugin and loader ecosystem

## Project Structure

```
project/
├── src/
│   ├── index.js          # Main entry point
│   ├── components/       # UI components
│   ├── utils/            # Utility functions
│   ├── styles/           # CSS/SCSS files
│   └── assets/           # Images, fonts, etc.
├── dist/                 # Build output (gitignored)
├── webpack.config.js     # Main configuration
├── webpack.dev.js        # Development config
├── webpack.prod.js       # Production config
└── package.json
```

## Configuration Best Practices

### Entry and Output

```javascript
module.exports = {
  entry: {
    main: './src/index.js',
    vendor: './src/vendor.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true
  }
};
```

### Mode Configuration

```javascript
module.exports = {
  mode: 'production', // or 'development'
  // production mode enables tree-shaking, minification, and optimizations
};
```

## Code Splitting

### Dynamic Imports

```javascript
// Use dynamic imports for on-demand loading
const module = await import('./heavy-module.js');

// With React
const LazyComponent = React.lazy(() => import('./LazyComponent'));
```

### SplitChunks Configuration

```javascript
optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      }
    }
  }
}
```

## Tree Shaking

### Enable Tree Shaking

1. Use ES6 module syntax (import/export)
2. Set `mode: 'production'`
3. Configure `sideEffects` in package.json

```json
{
  "sideEffects": false
}
```

Or specify files with side effects:

```json
{
  "sideEffects": ["*.css", "*.scss"]
}
```

### Babel Configuration for Tree Shaking

```json
{
  "presets": [
    ["@babel/preset-env", { "modules": false }]
  ]
}
```

## Loaders
````
END THIRD-PARTY FILE 7bc78672b6a860f9

The third-party file has ended. Everything between the 7bc78672b6a860f9 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2646 of 5642 bytes. © Mindrally · Apache-2.0 · https://github.com/Mindrally/skills/tree/HEAD/webpack-bundler/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md