Vite & Webpack

Vite 8 with Rolldown, and webpack 5 Checked Oct 2026 104 code snippets

The model

A bundler starts at an entry file and follows every import to build a dependency graph. It writes that graph out as bundles, the files the browser loads.
Webpack bundles the whole app before it serves a page, in dev and in production. Loaders transform one file at a time, and plugins hook into the whole build.
Vite skips the bundle in dev. It serves your code as native ES modules, compiles each file when the browser asks for it, and pre-bundles node_modules once.
For production, Vite bundles anyway, because each unbundled import costs a network round trip. Vite 8 uses Rolldown, a Rust bundler. Earlier versions built with Rollup.
Hot Module Replacement (HMR) swaps an edited module into the running page, so its state survives. If no module accepts the update, the page reloads.

Vite pre-bundles dependencies once, then compiles a source file only when the browser imports it. Webpack bundles the whole app before it serves anything.

How bundlers work

the ideas behind every Vite and webpack question

Transpile, minify, compress

Rewrite syntax for older browsersTranspile it with Babel, TypeScript or Oxc.

Shrink code without changing itMinify it with Terser or Oxc, after bundling.

Shrink what the server sendsCompress it. The server sends gzip or Brotli.

Asked in interviews

AskedWhat is the difference between transpilation, minification, and compression?

Pick a bundler

Run a large app with custom loadersWebpack, for the most control and Module Federation.

Bundle a libraryRollup. It's built for ES modules and tree shaking.

Bundle a small app with no configParcel, with Rust compilers and a cache for every build.

Asked in interviews

AskedWhat is the difference between Webpack and other bundlers like Rollup or Parcel?AskedWhat are the differences between Vite and Webpack?

Webpack's core concepts

Set the start file and output folderentryoutput.path

Turn CSS or TypeScript into modulesmodule.rules

Hook into the whole buildplugins

Say how webpack builds the graphIt follows every import from the entry until nothing new turns up.

Asked in interviews

AskedExplain the core concepts of Webpack AskedExplain the basic structure of a Webpack configuration file AskedHow does Webpack's dependency graph work?

Why Vite's dev server starts fast

Webpack is ready only after it bundles the app. Vite is ready once dependencies are pre-bundled, then compiles each file when the browser asks.

Explain Vite's fast startNo bundle. It compiles each file when the browser imports it.

Name the cost of skipping the bundleOne request per module, so a huge app loads slowly in dev.

Asked in interviews

AskedHow does Vite achieve faster development server startup compared to traditional bundlers?AskedWhat are the differences between Vite and Webpack?

Pre-bundling and production bundles

Say why Vite pre-bundles node_modulesIt turns CommonJS into ES modules, and many files into one request.

Always pre-bundle a packageoptimizeDeps.include

Rebuild node_modules/.vitevite --force

Say why production needs a bundleEach import is a network round trip, and nested ones wait in a chain.

Say what Vite 8 changedRolldown now pre-bundles and builds. Before, esbuild and Rollup did.

Asked in interviews

AskedWhat is dependency pre-bundling in Vite and why is it important?AskedWhy does Vite bundle for production when it serves unbundled modules in development?

Start a Vite project

create, run and build an app, and know where files go

Create, run and build

Create a projectnpm create vite@latest

Skip the prompts with a templatenpm create vite@latest app -- --template react-ts

Start the dev server on port 5173npm run dev

Build, then preview on port 4173npm run buildnpm run preview

Trapvite preview is for a local check. It is not a production server.

Asked in interviews

AskedHow do you create a new Vite project?AskedHow do you run a Vite development server and build for production?

Where files go

index.htmlthe entry, in the rootpublic/copied as issrc/main.jswhere your code startssrc/assets/imported, then hashedvite.config.jsthe config

Load your code from index.html<script type="module" src="/src/main.js">

Serve a file untouchedpublic/robots.txtLink to it as /robots.txt.

Trapindex.html goes in the root, not in public/. Vite treats it as source, part of the module graph.

Asked in interviews

AskedWhat is the basic file structure of a Vite project?AskedWhat is the role of index.html in a Vite project?AskedWhat's the difference between the public directory and the src/assets directory in Vite?

Configure Vite

the config file, modes, env variables, TypeScript and tests

vite.config.js and modes

Get autocomplete in the configdefineConfig({})

Change settings per command or mode({ command, mode }) => ({})

Build with staging settingsvite build --mode staging

Share a base config in a monorepomergeConfig(base, app)

TrapA mode isn't NODE_ENV. vite build --mode staging still makes a production build.

Asked in interviews

AskedHow do you configure Vite using vite.config.js?AskedHow do you configure Vite for different environments (development, staging, production)?

Env variables in Vite

Expose a variable to the browserVITE_API_URL=/api

Read it in code, always as a stringimport.meta.env.VITE_API_URL

Know which env file wins.env.[mode] beats .env. Shell variables beat both.

TrapOnly VITE_ names reach the browser, and anyone can read them in the bundle. Never put a secret in one.

Asked in interviews

AskedHow do you handle environment variables in Vite?

TypeScript and path aliases

Type-check, since Vite only strips typestsc --noEmit && vite build

Set the tsconfig flag Vite needs"isolatedModules": true

Import from @/ instead of ../../resolve.alias

Reuse tsconfig.json aliases in Vite 8resolve.tsconfigPaths: true

TrapVite's alias doesn't reach TypeScript. Add matching paths to tsconfig.json, or tsc reports missing imports.

Asked in interviews

AskedHow does Vite handle TypeScript and what are the configuration options?AskedHow do you configure path aliases in Vite?

Test with Vitest

Reuse the app's config in testsVitest reads vite.config.js. Add a test key.

Give tests a browser-like DOMenvironment: 'jsdom'

Asked in interviews

AskedHow do you handle testing in a Vite project?

Configure webpack

dev and production configs, env values and transpiling

Dev, production and env values

Share a base config for dev and prodmerge(common, prod)From webpack-merge.

Put a value into the bundle at build timenew webpack.DefinePlugin({})

Fail the build if a variable is missingnew webpack.EnvironmentPlugin(['API_URL'])

TrapDefinePlugin pastes each value in as code. Wrap a string in JSON.stringify, or it arrives without its quotes.

Asked in interviews

AskedHow do you configure webpack for development and production?AskedHow do you handle environment variables in Webpack?

TypeScript and Babel in webpack

Compile .ts and .tsx filests-loader

Speed up type-checked buildstranspileOnly: trueThen check types in ForkTsCheckerWebpackPlugin.

Transpile only what your target browsers need@babel/preset-env

Asked in interviews

AskedHow do you integrate Webpack with TypeScript?AskedWhat is the purpose of babel-loader and how do you configure it?

Externals, workers and top-level await

Load React from a CDN insteadexternals: { react: 'React' }

Bundle a Web Worker without worker-loadernew Worker(new URL('./w.js', import.meta.url))

Use top-level awaitNo config needed since webpack 5.83.

TrapKeep the worker path a literal string in new URL. Webpack can't follow a variable.

Asked in interviews

AskedWhat are externals in Webpack and when do you use them?AskedHow do you use Web Workers with Webpack 5?AskedHow do you configure top-level await in Webpack 5?

CSS, images & fonts

load styles and files in each tool

CSS in Vite

Use Sass, Less or Stylusnpm install -D sassNo plugin needed.

Inject shared Sass variablescss.preprocessorOptions

Scope classes to one componentButton.module.css

TrapPut @use, not @import, in scss.additionalData. Sass deprecated @import.

Asked in interviews

AskedHow does Vite handle CSS preprocessing (Sass, Less, Stylus)?

Assets in Vite

Get an image's hashed URLimport url from './img.png'

Import a file as text, a worker or inline?raw?worker?inline

Change the 4 KiB inline limitbuild.assetsInlineLimit

Asked in interviews

AskedHow does Vite handle asset imports and processing?

CSS in webpack

Import CSS and inject it as style tagsuse: ['style-loader', 'css-loader']

Extract CSS into filesMiniCssExtractPlugin.loader

Extract CSS with no plugin (5.109+)It's built in, and still experimental.

TrapLoaders run right to left. css-loader reads the file first, then style-loader injects it.

Asked in interviews

AskedWhat are loaders and how do they work?AskedExplain the difference between style-loader and css-loader AskedHow do you extract CSS into separate files in webpack?

Asset modules in webpack 5

Emit a file and import its URLtype: 'asset/resource'

Inline files under 8 KBtype: 'asset'

Use file-loader or url-loaderDeprecated in webpack 5. Asset modules replace them.

Set the URL files load fromoutput.publicPath

Asked in interviews

AskedHow do you handle different file types (images, fonts, etc.) in Webpack?AskedHow do you handle assets and public paths in Webpack?

Dev server & HMR

swap modules live, proxy API calls, keep the server safe

Hot Module Replacement

Accept an update in Viteimport.meta.hot.accept()

Accept an update in webpackmodule.hot.accept()import.meta.webpackHotUse the second in ES modules.

Turn HMR on in webpack-dev-serverhot: trueIt's on by default since v4.

TrapAn update no module accepts climbs to the entry, and the page fully reloads.

Asked in interviews

AskedWhat is Hot Module Replacement (HMR) and how does it work in Vite?AskedHow does Hot Module Replacement work in webpack?

Dev servers, proxies and safety

Proxy /api to a backend in Viteserver.proxyThe browser sees one origin, so no CORS check runs.

Start webpack-dev-servernpx webpack serve

Proxy /api in webpack-dev-server 5Give proxy an array of objects, each with a context list.

Serve index.html for client-side routeshistoryApiFallback: true

Open Vite's dev server to your phoneserver.host: true

Limit what Vite's dev server can serveserver.fs.allow

TrapA dev proxy does nothing in production. Route /api on your web server, or send CORS headers.

Asked in interviews

AskedHow do you handle CORS and proxy configuration in Vite?AskedHow do you configure webpack-dev-server?AskedHow do you handle security considerations in Vite?

Split & lazy-load code

send less JavaScript on the first load

Dynamic import()

Load a module in its own chunkawait import('./chart.js')

Lazy-load a whole folder in Viteimport.meta.glob('./pages/*.js')

Name or prefetch a webpack chunk/* webpackChunkName: "chart" *//* webpackPrefetch: true */

TrapIn webpack, a fully dynamic import(foo) bundles nothing and fails at runtime. Keep part of the path static.

Asked in interviews

AskedHow do you handle dynamic imports and lazy loading in Vite?AskedHow do you implement dynamic imports for code splitting?AskedWhat is code splitting and why is it important?

Code splitting in Vite

Say where Vite splitsAt each entry and import(). Shared code gets its own chunk.

Group libraries into a chunk in Vite 8codeSplitting.groups

Group modules with manualChunksIts object form is gone in Vite 8. Its function form is deprecated.

Ship one CSS file, not one per chunkbuild.cssCodeSplit: false

TipVite loads a lazy chunk's CSS before it runs the chunk. That prevents a flash of unstyled content.

Asked in interviews

AskedHow does code splitting work in Vite?AskedHow does Vite handle CSS code splitting and what are the trade-offs?

SplitChunksPlugin and entries

Split shared and vendor codesplitChunks: { chunks: 'all' }The default splits async chunks only.

Give React its own chunkcacheGroups

Build one bundle per pageGive entry an object, one key per page.

Tell a chunk from a bundleA chunk groups modules inside the build. A bundle is a file it writes.

Asked in interviews

AskedWhat are multiple entry points in webpack and when would you use them?AskedWhat is the difference between chunk and bundle in Webpack?

Tree shaking

Keep code tree-shakableUse ES modules. Babel must not turn import into require.

Turn tree shaking onmode: 'production'It marks unused exports. The minifier deletes them.

Let webpack drop unused files whole"sideEffects": false

TrapList polyfills and CSS in sideEffects. Otherwise webpack may drop them.

Asked in interviews

AskedWhat is tree shaking and how does it work in Webpack?

Caching, speed & debugging

browser caching, faster builds and build errors

Content hashes and cache headers

Cache files until they change[name].[contenthash].jsProduction mode hashes each file's final bytes.

Set cache headers for a deployHashed files get max-age=31536000, immutable. index.html gets no-cache.

Asked in interviews

AskedWhat is the real content hash feature in Webpack 5?

Speed up a Vite build

Minify with the defaultsVite 8 uses Oxc for JS and Lightning CSS for CSS.

Switch to Terser to drop console callsminify: 'terser'drop_console: true

Skip gzip size reportsreportCompressedSize: false

Load fewer files per pageImport from the file itself, not a barrel index.js.

TrapoptimizeDeps can't speed up vite build. Pre-bundling only runs in dev.

Asked in interviews

AskedHow do you optimize Vite for production builds?

Speed up webpack

Reuse work across buildscache: { type: 'filesystem' }

Run slow loaders in workersthread-loader

Add a CSS minimizer, keep Terserminimizer: ['...', new CssMinimizerPlugin()]

Asked in interviews

AskedWhat are some common Webpack performance optimization techniques?AskedHow does persistent caching work in Webpack 5?AskedWhat is the purpose of the optimization property in Webpack configuration?

Analyze and debug builds

See what's in each webpack chunkwebpack --profile --json > stats.jsonwebpack-bundle-analyzer stats.json

Get the full error and import chainstats: { errorDetails: true }

Fix the error Can't resolve 'crypto'resolve.fallbackWebpack 5 stopped adding Node.js polyfills.

Profile a slow Vite buildvite build --profile

Asked in interviews

AskedHow do you analyze and debug Webpack bundle performance?AskedWhat are some common Webpack errors and how do you debug them?AskedHow do you optimize bundle size in Webpack?

Source maps

Pick a dev source mapdevtool: 'eval-source-map'

Give source maps to error tools onlydevtool: 'hidden-source-map'

Read the output of a failing Vite buildbuild: { minify: false, sourcemap: true }

TrapPublic .map files expose your source. Keep them from normal users.

Asked in interviews

AskedWhat are source maps and how do you configure them in webpack?

Plugins & loaders

use them, order them and write your own

Vite plugins

Add a pluginplugins: [react()]Most Rollup plugins work too.

Run a plugin only in builds, or firstapply: 'build'enforce: 'pre'

Serve a virtual module, with no file on diskresolveIdload

Compile a custom file typetransform(code, id)

Add a route to the dev serverconfigureServer(server)

Handle HMR for a custom file typehandleHotUpdate

Asked in interviews

AskedWhat are Vite plugins and how do they work?

Webpack loaders and plugins

Tell a loader from a pluginA loader changes one file. A plugin hooks into the whole build.

Generate the HTML that loads your bundlesnew HtmlWebpackPlugin()

Empty dist/ before each buildoutput.clean: true

Write a loaderthis.getOptions()Export a function that takes the source and returns new source.

Write a pluginapply(compiler)Tap the hooks you need.

Add a file to the outputcompilation.hooks.processAssets

TrapWebpack caches loader results, so a loader must give the same output for the same input.

Asked in interviews

AskedWhat are webpack plugins and how do they differ from loaders?AskedExplain some commonly used Webpack plugins AskedWhat is HtmlWebpackPlugin and why is it useful?

Deploy, scale & migrate

deploys, libraries, SSR, micro-frontends and upgrades

Deploy an app, a library or a PWA

Deploy under /repo/ on GitHub Pagesbase: '/repo/'

Keep client routes working on refreshServe index.html for unknown paths.

Build a library, not an appbuild.lib

Keep React out of the libraryrolldownOptions.external

Make the app work offlinevite-plugin-pwa

Asked in interviews

AskedHow do you configure Vite for different deployment scenarios?AskedWhat is library mode in Vite and how do you use it?AskedHow do you configure Vite for PWA (Progressive Web App) development?

SSR and the Environment API

Run Vite inside your Node.js servermiddlewareMode: truevite.ssrLoadModule('/src/server-entry.js')

Build the server bundlevite build --ssr src/server-entry.js

Target the browser, Node.js and edge runtimesenvironments

Asked in interviews

AskedHow does Vite handle SSR (Server-Side Rendering) and what are the key considerations?

Module Federation

Load another app's modules at runtimeModuleFederationPluginA remote exposes modules. A host loads them.

Run one copy of React across appssingleton: true

Fix "not available for eager consumption"Start the entry with import('./bootstrap').

Use Module Federation with Vite@module-federation/vite

TrapA remote that is down or changes its API breaks the host at runtime. Plan a fallback.

Asked in interviews

AskedWhat is module federation in Webpack 5?

Migrate and upgrade

Port webpack-only code to Viterequire.context becomes import.meta.glob. process.env.X becomes import.meta.env.VITE_X.

Upgrade webpack 4 to 5Clear every deprecation warning on 4 first. Webpack 5 removed everything 4 deprecated.

Close the compiler after a Node.js API buildcompiler.close(callback)

Asked in interviews

AskedHow would you migrate a large Webpack project to Vite?

Pro · $10/mo

This sheet stays free. With Pro, you can:

Every answer on this sheet. Read the full answer to all 89 questions it links, not just the 15 free ones.
My sheet. The cards you star and the ones you miss in Quiz me, from every sheet, on one page to quiz and print.
PDFs. Download this sheet and My sheet, laid out for A4, with every question a link to its answer.
The rest of Pro. Every answer in the question library, and 1,000 AI credits a month.

Get Pro or browse more free sheets

The model

How bundlers work

Transpile, minify, compress

Pick a bundler

Webpack's core concepts

Why Vite's dev server starts fast

Pre-bundling and production bundles

Start a Vite project

Create, run and build

Where files go

Configure Vite

vite.config.js and modes

Env variables in Vite

TypeScript and path aliases

Test with Vitest

Configure webpack

Dev, production and env values

TypeScript and Babel in webpack

Externals, workers and top-level await

CSS, images & fonts

CSS in Vite

Assets in Vite

CSS in webpack

Asset modules in webpack 5

Dev server & HMR

Hot Module Replacement

Dev servers, proxies and safety

Split & lazy-load code

Dynamic import()

Code splitting in Vite

SplitChunksPlugin and entries

Tree shaking

Caching, speed & debugging

Content hashes and cache headers

Speed up a Vite build

Speed up webpack

Analyze and debug builds

Source maps

Plugins & loaders

Vite plugins

Webpack loaders and plugins

Deploy, scale & migrate

Deploy an app, a library or a PWA

SSR and the Environment API

Module Federation

Migrate and upgrade

Frontend Development

Angular

CSS3

GraphQL

HTML5

This sheet stays free. With Pro, you can: