---
name: webpack-config-optimizer
description: "Generate or optimize a Webpack configuration for production builds. Use when the user wants help with Webpack Config Optimizer. Related topics: coding, frontend, webpack."
---

# Webpack Config Optimizer

Generate or optimize a Webpack configuration for production builds.

## How to use this skill

1. Ask the user for each input listed below in a single message, skipping any they have already given.
2. Where options are listed, offer them, but accept other answers too.
3. Fill the answers into the prompt template, then follow the completed prompt to produce the result.

## Inputs

- **Project Type** (choose one: React SPA, Vue.js, Vanilla JS, TypeScript, Library/Package)
- **Entry Point** (free text, e.g. "")
- **Output Path** (free text, e.g. "")
- **Webpack Version** (choose one: Webpack 4, Webpack 5)
- **Input 5** (choose any: Code splitting, Lazy loading, Tree shaking, CSS/SCSS modules, Asset optimisation, Source maps, Hot Module Replacement (HMR), Bundle analyser, Environment variables, PWA/Service Worker)
- **Enable build caching** (choose one: Yes, No)
- **Target bundle size warning** (free text, e.g. "")
- **Separate vendor chunks** (choose one: Yes, No)
- **Minification** (choose one: Terser, ESBuild, Default, None)

## Prompt template

## Introduction
Generate or optimise a Webpack configuration file for your project's production and development needs.

## Project Setup
- Project Type: {{Project Type}}
- Entry Point: {{Entry Point}}
- Output Path: {{Output Path}}
- Webpack Version: {{Webpack Version}}

## Features to Configure
{{Input 5}}

## Performance Goals
- Enable build caching: {{Enable build caching}}
- Target bundle size warning: {{Target bundle size warning}}
- Separate vendor chunks: {{Separate vendor chunks}}
- Minification: {{Minification}}

---

Source: [Webpack Config Optimizer on PromptBuild](https://promptbuild.io/prompt/WzSus35DVAzURYPDisgk/webpack-config-optimizer)