webpack

Webpack configuration, module federation, loaders, plugins, and optimization.

509 stars

bya5c-ai

View on GitHub Installation ↓

Best use case

webpack is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Webpack configuration, module federation, loaders, plugins, and optimization.

Teams using webpack should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/webpack/SKILL.md --create-dirs "https://raw.githubusercontent.com/a5c-ai/babysitter/main/library/specializations/web-development/skills/webpack/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/webpack/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How webpack Compares

Feature / Agent	webpack	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Webpack configuration, module federation, loaders, plugins, and optimization.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Webpack Skill

Expert assistance for Webpack configuration and optimization.

## Capabilities

- Configure webpack for production
- Set up Module Federation
- Create custom loaders/plugins
- Optimize bundle size
- Configure code splitting

## Configuration

```javascript
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js',
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
        },
      },
    },
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'app',
      remotes: { shared: 'shared@http://localhost:3001/remoteEntry.js' },
    }),
  ],
};
```

## Target Processes

- build-optimization
- micro-frontend-architecture
- legacy-migration

Related Skills

process-builder

509

from a5c-ai/babysitter

Scaffold new babysitter process definitions following SDK patterns, proper structure, and best practices. Guides the 3-phase workflow from research to implementation.

Workflow & Productivity

babysitter

509

from a5c-ai/babysitter

Orchestrate via @babysitter. Use this skill when asked to babysit a run, orchestrate a process or whenever it is called explicitly. (babysit, babysitter, orchestrate, orchestrate a run, workflow, etc.)