Vite vs Webpack — ビルドツール比較【2026年】

Vite と Webpack の概要

フロントエンド開発のビルドツールとして、ViteとWebpackは最も広く使われている2つの選択肢です。

Vite とは

ViteはEvan You（Vue.jsの作者）が開発した、次世代のフロントエンドビルドツールです。開発時はネイティブESモジュールを活用し、本番ビルドにはRollup（v6からはRolldownに移行中）を使います。

Webpack とは

Webpackは2012年から開発が続くJavaScriptモジュールバンドラーです。豊富なプラグインエコシステムと高い設定柔軟性を持ちます。

比較表

項目	Vite	Webpack
開発サーバー起動	数百ms	数秒〜数十秒
HMR速度	非常に高速	プロジェクト規模に依存
本番ビルド	Rollup（高速）	Webpack（安定）
設定のシンプルさ	シンプル	複雑になりがち
TypeScript対応	ゼロコンフィグ	ts-loaderなどが必要
CSS対応	ゼロコンフィグ	css-loaderなどが必要
プラグイン数	増加中	非常に豊富
学習コスト	低い	高い

開発サーバーの仕組みの違い

Webpack: バンドルしてから配信

ソースコード → [Webpack バンドル] → ブラウザ
              （全ファイルを処理）

Webpackはすべてのモジュールをバンドルしてからブラウザに配信します。プロジェクトが大きくなるほど起動が遅くなります。

Vite: ネイティブESMで配信

ソースコード → [esbuild で変換] → ブラウザ（ESM import）
              （リクエストされた分だけ）

Viteはブラウザのネイティブ ES Modules を活用し、リクエストされたファイルだけを変換して配信します。プロジェクトの規模に関係なく、起動が高速です。

HMR（Hot Module Replacement）の速度

Webpack: ファイル変更 → 依存グラフ再計算 → 部分バンドル → ブラウザ更新
         （プロジェクトが大きいほど遅い）

Vite:    ファイル変更 → そのモジュールだけ更新 → ブラウザ更新
         （プロジェクトの規模に影響されない）

設定の比較

Vite の設定

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
  resolve: {
    alias: {
      '@': '/src',
    },
  },
});

TypeScript、CSS、JSON、静的アセットはゼロコンフィグで対応しています。

Webpack の設定

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  devServer: {
    port: 3000,
    hot: true,
  },
  devtool: 'source-map',
};

同じことを実現するのにWebpackの設定は長くなりがちです。

CSS の取り扱い

Vite

// ゼロコンフィグで動く
import './style.css';
import styles from './app.module.css';    // CSS Modules
import './style.scss';                      // Sass（sass をインストールするだけ）

# Sass を使うならインストールするだけ
npm install -D sass

Webpack

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: { modules: true },
          },
        ],
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
};

環境変数

Vite

# .env
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

// クライアントコードで使用
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE);  // 'development' or 'production'

VITE_ プレフィックスのない変数はクライアントコードに公開されません（セキュリティ対策）。

Webpack

const webpack = require('webpack');
const dotenv = require('dotenv');

dotenv.config();

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.API_URL': JSON.stringify(process.env.API_URL),
    }),
  ],
};

プロキシ設定

Vite

// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});

Webpack

// webpack.config.js
module.exports = {
  devServer: {
    proxy: [{
      context: ['/api'],
      target: 'http://localhost:8080',
      pathRewrite: { '^/api': '' },
    }],
  },
};

ビルドパフォーマンス

大規模プロジェクトでのベンチマーク（参考値）

指標	Vite	Webpack
開発サーバー起動	300ms	8秒
HMR	50ms以下	200ms〜2秒
プロダクションビルド	12秒	25秒
バンドルサイズ	同程度	同程度

選定ガイド

Vite を選ぶべきケース

• 新規プロジェクト: 2026年の新規プロジェクトはViteがデファクト
• DX（開発体験）重視: 高速な起動とHMR
• フレームワーク公式: React、Vue、Svelte、Astro等がViteを採用
• 設定をシンプルに保ちたい: ゼロコンフィグに近い

Webpack を選ぶべきケース

• 既存プロジェクトの保守: 安定して動いているなら無理に移行しない
• Module Federation: マイクロフロントエンドで必要
• 特殊なビルド要件: Webpackの豊富なloaderが必要
• SSR（一部）: Next.jsなど、内部でWebpackを使うフレームワーク

Webpack → Vite の移行手順

1. Vite をインストール

npm install -D vite @vitejs/plugin-react

2. vite.config.ts を作成

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': '/src' },
  },
});

3. index.html を移動

Viteは index.html をプロジェクトルートに置きます。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>
</html>

4. 環境変数のプレフィックスを変更

# 旧: REACT_APP_
REACT_APP_API_URL=...

# 新: VITE_
VITE_API_URL=...

5. package.json のスクリプトを更新

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  }
}

6. Webpack関連のパッケージを削除

npm uninstall webpack webpack-cli webpack-dev-server \
  ts-loader css-loader style-loader html-webpack-plugin

まとめ

判断軸	Vite	Webpack
速度	◎	△
設定のシンプルさ	◎	△
エコシステム	○	◎
安定性	○	◎
新規プロジェクト	◎	△
移行コスト	-	既存なら低い

2026年の新規プロジェクトではViteが第一選択肢です。既存のWebpackプロジェクトは、パフォーマンスに問題がなければ無理に移行する必要はありません。

---

ビルド設定ファイル（JSON/YAML）の整形には、AssistyのJSONフォーマッターをご活用ください。