# Webpack

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

- Skill: `a5c-ai/webpack` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add a5c-ai/webpack`
- Raw SKILL.md: https://api.skillmd.com/api/skills/a5c-ai/webpack/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: a5c-ai (https://skillmd.com/u/a5c-ai)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/a5c-ai/webpack

---


# 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