Webpack to Vite: translate the config item by item and treat environment variables as public

Inventory the configuration first

A Webpack configuration records years of decisions. Before you add Vite, list every loader, plugin, alias, dev-server proxy, environment injection, entry point and glob-style import, and write beside each one its replacement or the decision to drop it. This list is the single most useful artefact of the move: it is what you check at the end, and it is where a forgotten behaviour shows up. The checks here refer to Vite 8, the current major on the project's releases page as of 11 October 2026.

• Include behaviours that live outside the file, such as a CI step that copies assets.
• Mark each item as moved, replaced, dropped or unknown, and resolve every unknown.

Environment variables become public by prefix

Vite exposes to client code only variables whose names start with VITE_, through import.meta.env, and their values are replaced statically at build time and are always strings. The documentation says these values end up in the bundled source, so they should never hold sensitive data. Code that reads process.env.SOMETHING in the browser has to be renamed and each value classified: public, or server-only and out of the browser bundle altogether. Treat any key or token in a variable the browser reads as a security problem to fix, not a setting to rename.

• Write a table of old name, new name and public or server-only.
• Search the built output for server-only values.
• Files with a .local suffix should stay out of version control.

If the matrix is wider than the box, scroll horizontally to read every column. Keyboard: focus the matrix and use Left/Right.

old name                   | new name                     | in the browser bundle?
process.env.API_URL        | import.meta.env.VITE_API_URL | yes, a public address
process.env.PAYMENT_SECRET | (not renamed)                | no, must stay on a server

Modules: require calls, glob imports and old dependencies

Vite serves native ES modules in development, so require calls in your own source need to become imports. Webpack's require.context, which loads modules by pattern, has no direct equivalent in the documentation; Vite offers import.meta.glob, lazy by default with an eager option, and its arguments must be literals. For dependencies that are CommonJS or UMD, Vite pre-bundles them into ESM in development, and you can override that discovery with an include or exclude list if one is missed.

• Replace patterns, do not rewrite each import by hand.
• If a dependency fails to load in development, add it to the include list before assuming a code problem.

What Vite does not do for you

Vite transpiles TypeScript but does not type-check, so errors that used to fail a Webpack build can vanish. Keep a separate type-check command and run it in CI. The move also does not upgrade your framework, change your tests or add support for browsers the project does not target. Record the production output of the old build so you can compare routes and assets after.

• Run the type check as its own step in CI.
• Compare routes, not just that the build finishes.

What does not fit, and how the fixed job is accepted

This applies to client-side single-page apps built by Webpack on their own. Server-side rendering, module federation, old-browser support and Webpacker inside a Rails app are outside the fixed job. It is accepted when the Vite production build renders every agreed route like the Webpack build, the inventory is complete, the environment table shows no secret in the bundle, and the existing tests and type check pass in CI. Send the loader and plugin names and the browser-read setting names, not config files or keys. Prices are untested proposals; payment follows the agreed checks.