playbooks

home / skills / partme-ai / full-stack-skills / webpack

webpack skill

/skills/webpack

This skill helps you configure and optimize Webpack builds, split code, choose loaders and plugins, and streamline development workflows.

npx playbooks add skill partme-ai/full-stack-skills --skill webpack

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

Files (2)
SKILL.md
695 B
---
name: webpack
description: Provides comprehensive guidance for Webpack bundler including configuration, loaders, plugins, code splitting, optimization, and development setup. Use when the user asks about Webpack, needs to configure Webpack, set up build pipelines, optimize bundles, or work with Webpack plugins.
license: Complete terms in LICENSE.txt
---

## When to use this skill

Use this skill whenever the user wants to:
- [待完善：根据具体工具添加使用场景]

## How to use this skill

[待完善：根据具体工具添加使用指南]

## Best Practices

[待完善：根据具体工具添加最佳实践]

## Keywords

[待完善：根据具体工具添加关键词]

Overview

This skill provides comprehensive, practical guidance for using Webpack as a JavaScript and asset bundler. It helps you create and refine webpack configurations, choose and configure loaders and plugins, implement code splitting, and optimize builds for development and production. The guidance emphasizes concrete examples, common patterns, and trade-offs to get predictable build outputs and fast iteration loops.

How this skill works

The skill inspects your project goals and current setup, then recommends concrete webpack config snippets and folder layouts tailored to frameworks (vanilla, React, Vue) and languages (TypeScript, Babel). It explains loader/plugin choices, shows how to enable HMR, and gives step-by-step optimization techniques such as tree shaking, minification, caching, and bundle analysis. For each recommendation it highlights compatibility, typical configuration, and commands to run.

When to use it

  • Setting up a new front-end build pipeline for single-page apps or libraries
  • Migrating legacy build scripts (Gulp/Grunt) to webpack
  • Optimizing bundle size and load performance for production
  • Configuring development workflows: hot-reload, source maps, and fast rebuilds
  • Integrating TypeScript, CSS preprocessors, images, or other static assets into builds

Best practices

  • Start with a minimal config and add complexity only when needed: entry, output, mode, and rules
  • Separate development and production configs (or use webpack-merge) to keep settings clear
  • Use loaders for file transforms (babel-loader, ts-loader, css-loader, file-loader/asset modules) and plugins for orchestration (HtmlWebpackPlugin, DefinePlugin)
  • Enable long-term caching: deterministic module IDs, content hashes in filenames, and runtime chunk extraction
  • Measure impact: use bundle analyzers and source-map-explorer before and after optimizations

Example use cases

  • Create a React app bundling pipeline with Babel, CSS modules, and code splitting by route
  • Optimize a legacy bundle by enabling scope hoisting, tree shaking, and splitChunks to reduce initial load
  • Set up development server with Hot Module Replacement and fast source maps for TDD workflows
  • Build a small library with UMD and ESM targets, producing minimized and non-minimized outputs
  • Integrate TypeScript with ts-loader or babel-loader plus source maps for IDE-friendly debugging

FAQ

Do I need webpack for every project?

Not always. Use webpack when you need fine-grained control over bundling, asset processing, or optimizations. For simple sites, lighter tools or framework CLIs may be faster to adopt.

How do I debug long build times?

Profile builds with --profile and webpack-bundle-analyzer, inspect slow loaders/plugins, enable caching (cache: true) and parallelize work (thread-loader) to speed up rebuilds.