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, dynamicrequire()with variables, orDefinePlugin-based global replacements — these need explicit rewrites, not just a config swap
Phase 2 — PLAN
- Full loader/plugin → Vite/Turbopack equivalent mapping table, explicitly marking any entries in category (b) or (c) from Phase 1
- For every (c) entry, a proposed workaround or an explicit "this can't be ported automatically, here's what to do manually"
- 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'simport.meta.globequivalent 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