webpack-to-vite-config-translator

Installation
SKILL.md

Webpack → Vite/Turbopack Config Translator

Phase 1 — THINK

Loaders and plugins are the whole risk surface here — some have clean Vite/Rollup equivalents, some don't exist yet, and guessing wrong produces a build that "works" but silently mishandles certain files.

  • List every loader and plugin in the webpack config, and for each, classify it as: (a) has a known clean Vite equivalent, (b) has a partial/behavior-different equivalent, or (c) has no real equivalent and needs a workaround or a "keep on Webpack for this part" decision
  • Pay special attention to CSS-in-JS setups, SVG loaders, and module federation — these are the most common "no clean equivalent" cases
  • Check for webpack-specific features in use: require.context, dynamic require() with variables, or DefinePlugin-based global replacements — these need explicit rewrites, not just a config swap

Phase 2 — PLAN

  1. Full loader/plugin → Vite/Turbopack equivalent mapping table, explicitly marking any entries in category (b) or (c) from Phase 1
  2. For every (c) entry, a proposed workaround or an explicit "this can't be ported automatically, here's what to do manually"
  3. Migration order: config first and verified on a minimal build, then progressively re-enable each loader/plugin one at a time rather than a single big-bang swap

Phase 3 — EXECUTE

  • Write the new config incrementally per the plan, verifying the build after each loader/plugin is added back
  • For require.context/dynamic requires, rewrite using Vite's import.meta.glob equivalent rather than leaving them broken
  • Flag anything from category (c) directly in the code/config with a comment explaining what manual step is still needed — don't leave it silently half-migrated
Installs
4
Repository
theamitv/skills
First Seen
Aug 1, 2026