Vite Tutorial: Learn Build Tool from Scratch (2026)

Vite is a next-generation front-end build tool created by Evan You (creator of Vue.js). Instead of bundling your entire application before the dev server can start, Vite serves source files over native ES modules — the browser handles module loading, giving you instant server start and hot module replacement that stays fast regardless of project size.

For production builds, Vite uses Rollup under the hood with pre-configured optimizations. It works out of the box with vanilla JavaScript, TypeScript, React, Vue, Svelte, SolidJS, and most modern frameworks. Vite’s plugin system is compatible with Rollup plugins.

# Start dev server
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

# Output:
# VITE v6.0.0  ready in 245ms
# Local: http://localhost:5173/

# Even with 1000+ modules, Vite starts in ~200ms
# Traditional bundler with 1000+ modules: 5-30 seconds

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      }
    }
  }
});

// HMR API (in application code)
if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    // Re-run when this module or its imports change
    console.log('Module updated:', newModule);
  });

  import.meta.hot.dispose(() => {
    // Cleanup when module is about to be replaced
    console.log('Module being disposed');
  });

  // Decline HMR for this module
  // import.meta.hot.decline();
}

// Vite's HMR respects the module graph
// Changing Counter.tsx only refreshes that component
// No full page reload, no state loss

// vite.config.js with SSR HMR
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    hmr: {
      overlay: true,      // Show errors as overlay
      protocol: 'wss',    // WebSocket secure
      timeout: 3000,
    }
  }
});

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
import { VitePWA } from 'vite-plugin-pwa';
import Inspect from 'vite-plugin-inspect';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['babel-plugin-styled-components'],
      },
    }),
    svgr({ svgrOptions: { icon: true } }),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'My App',
        short_name: 'App',
        start_url: '/',
        display: 'standalone',
      },
    }),
    Inspect(),
  ],
  resolve: {
    alias: {
      '@': '/src',
      '@components': '/src/components',
    },
  },
});

// CSS imports (global)
import './styles/global.css';

// CSS Modules (scoped)
import styles from './Card.module.scss';

// PostCSS + Tailwind
// postcss.config.js
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

export default {
  plugins: [tailwindcss, autoprefixer],
};

/* tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

// Asset imports
import logo from './assets/logo.svg?url';
import logoUrl from './assets/logo.svg';
import rawLogo from './assets/logo.svg?raw';

// JSON imports
import pkg from './package.json';
console.log(pkg.version);

// vite.config.js asset configuration
export default defineConfig({
  build: {
    assetsInlineLimit: 4096,
    assetsDir: 'static',
    cssCodeSplit: true,
  },
});

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    outDir: 'dist',
    target: 'es2020',
    minify: 'esbuild',      // 'esbuild' (fast) or 'terser' (smaller)
    cssMinify: 'lightningcss',
    sourcemap: 'hidden',

    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom', 'react-router-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
          utils: ['date-fns', 'zod', 'zustand'],
        },
      },
    },

    chunkSizeWarningLimit: 500,
    cssCodeSplit: true,
    assetsInlineLimit: 4096,
  },

  optimizeDeps: {
    include: ['react', 'react-dom', 'lodash-es'],
    exclude: ['@large-lib/experimental'],
  },
});

// npx vite build  ->  outputs to dist/

// SSR setup (basic)
// vite.config.js
export default defineConfig({
  ssr: {
    noExternal: ['some-dep'],
    target: 'node',
  },
});

// Library mode: vite.config.js
export default defineConfig({
  build: {
    lib: {
      entry: './src/index.ts',
      name: 'MyLib',
      formats: ['es', 'cjs', 'umd'],
      fileName: (format) => `my-lib.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
    },
  },
});

// Web Workers
const worker = new Worker(new URL('./worker.ts', import.meta.url));
worker.postMessage({ type: 'process', data: largeArray });
worker.onmessage = (event) => {
  console.log('Result:', event.data);
};

// Vitest (vite.config.ts)
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './test/setup.ts',
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
    },
  },
});

Originally published on Ayodhyyya. Last updated June 1, 2026.