home / skills / ehtbanton / claudeskillsrepo / webpack-config-builder

webpack-config-builder skill

safe

This skill generates production-ready Webpack configurations for TypeScript projects, including loaders, plugins, optimizations, and separate development and

npx playbooks add skill ehtbanton/claudeskillsrepo --skill webpack-config-builder

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

2.0 KB

---
name: webpack-config-builder
description: Generate Webpack configuration files for bundling JavaScript/TypeScript applications with loaders, plugins, and optimization settings. Triggers on "create webpack config", "generate webpack configuration", "webpack setup for", "bundle config".
---

# Webpack Config Builder

Generate production-ready Webpack configuration files with appropriate loaders, plugins, and optimization settings.

## Output Requirements

**File Output:** `webpack.config.js` or `webpack.config.ts`
**Format:** Valid Webpack 5 configuration
**Standards:** Webpack 5.x

## When Invoked

Immediately generate a complete Webpack configuration with development and production modes, loaders for common file types, and optimization settings.

## Configuration Template

```javascript
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';

  return {
    entry: './src/index.tsx',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: isProduction ? '[name].[contenthash].js' : '[name].js',
      clean: true,
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
      alias: { '@': path.resolve(__dirname, 'src') },
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        },
        {
          test: /\.css$/,
          use: [isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader'],
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({ template: './public/index.html' }),
      isProduction && new MiniCssExtractPlugin(),
    ].filter(Boolean),
    devServer: {
      port: 3000,
      hot: true,
    },
  };
};
```

## Example Invocations

**Prompt:** "Create webpack config for React TypeScript"
**Output:** Complete `webpack.config.js` with TypeScript, React, CSS support.

Overview

This skill generates production-ready Webpack configuration files for JavaScript and TypeScript applications. It outputs a valid Webpack 5 config (webpack.config.js or .ts) with development and production modes, loaders, plugins, and optimization presets. Use it to quickly scaffold bundling, dev server, and build optimizations tailored to common stacks like React + TypeScript.

How this skill works

Provide a target stack or brief project details and the skill produces a complete Webpack configuration that includes entry/output, resolve aliases, module rules for TS/JS, CSS handling, and common assets. It toggles production vs development settings, inserts plugins such as HtmlWebpackPlugin and MiniCssExtractPlugin, and sets sensible defaults for filenames, content hashing, and the dev server. The output is formatted to work with Webpack 5 and can be returned as either a .js or .ts config file.

When to use it

Starting a new React or Vue app with TypeScript and need a custom bundler config
Migrating an older build to Webpack 5 and wanting modern defaults (contenthash, clean output)
Needing a fast scaffold for CSS extraction, asset handling, and devServer hot reload
Creating a production build with optimizations and caching-friendly filenames
Adding aliases, loaders, or plugin wiring without handcrafting the full config

Best practices

Specify entry point and output path explicitly and use contenthash in production filenames
Use ts-loader or babel-loader with appropriate presets for TypeScript support
Extract CSS in production with MiniCssExtractPlugin and use style-loader during development
Keep plugins conditional on mode to avoid unnecessary build overhead in dev
Add resolve.extensions and an alias (like @ -> src) to simplify imports

Example use cases

Create webpack config for React TypeScript including tsx handling and CSS modules
Generate a config for a plain TypeScript library with separate dev and prod builds
Scaffold bundling for a single-page app with HtmlWebpackPlugin and devServer hot reload
Produce a production-ready config with MiniCssExtractPlugin and contenthashed filenames
Quickly add image and font asset rules alongside JS/TS and CSS processing

FAQ

Can the config target both development and production?

Yes. The generated config exports a function that detects argv.mode and applies mode-specific rules and plugins.

Which file formats are supported out of the box?

Typical outputs include .tsx/.ts/.js, CSS, images, and fonts; loaders for these are included by default and can be extended.