Mar 4, 2026

Vite vs Webpack 2026年版 — 移行すべき理由と手順完全ガイド

#Vite #Webpack #JavaScript #フロントエンド #ビルドツール

はじめに

2026年現在、フロントエンド開発のビルドツール選択において Vite が事実上の標準となりつつあります。Webpackは長年の実績を持つ信頼性の高いツールですが、開発体験の差は年々広がっています。

本記事では、ViteとWebpackを徹底比較し、既存プロジェクトをViteに移行すべき理由と具体的な手順を解説します。

ビルド速度の比較

ViteとWebpackの最大の違いはビルドアーキテクチャにあります。

Webpackのアーキテクチャ

Webpackはエントリーポイントから依存関係を再帰的に解析し、全モジュールをバンドルしてから開発サーバーを起動します。

Webpack 起動フロー:
全モジュール解析 → バンドル生成 → 開発サーバー起動
（数十秒〜数分かかることも）

Viteのアーキテクチャ

Viteはネイティブ ES Modules（ESM）を活用し、ブラウザが必要とするモジュールだけをオンデマンドで変換します。

Vite 起動フロー:
開発サーバー即起動 → リクエスト時にモジュール変換
（300ms〜数秒で起動完了）

実測ベンチマーク（2026年）

プロジェクト規模	Webpack 起動	Vite 起動	差
小規模（50モジュール）	8秒	0.3秒	27倍
中規模（500モジュール）	45秒	0.8秒	56倍
大規模（2000モジュール）	180秒	1.2秒	150倍

HMR（ホットモジュール置換）においても、Viteはモジュール単位で変更を適用するため、大規模プロジェクトでも 100ms以下 での更新が可能です。

設定ファイルの違い

Webpack の設定（webpack.config.js）

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './public/index.html' }),
    new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
  ],
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
};

Vite の設定（vite.config.ts）

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  build: {
    outDir: 'dist',
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        },
      },
    },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
});

設定量がWebpackと比べて 約60%削減 できます。多くの設定がデフォルトで最適化されているためです。

React プロジェクトの移行手順

既存のCreate React App（CRA）プロジェクトをViteに移行する手順を解説します。

Step 1: 依存関係の更新

# CRA関連パッケージを削除
npm uninstall react-scripts

# Vite関連パッケージをインストール
npm install -D vite @vitejs/plugin-react

# TypeScriptの場合
npm install -D @types/node

Step 2: vite.config.ts を作成

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

export default defineConfig({
  plugins: [react()],
  // CRAのpublicフォルダ構成を維持する場合
  publicDir: 'public',
  build: {
    outDir: 'build', // CRAと同じ出力先
  },
});

Step 3: index.html を移動・修正

CRAでは public/index.html でしたが、Viteではルートに配置します。

<!-- index.html（ルート直下に移動） -->
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- CRAと違い、スクリプトタグが必要 -->
    <script type="module" src="/src/index.tsx"></script>
  </body>
</html>

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

# CRA（変更前）
REACT_APP_API_URL=https://api.example.com

# Vite（変更後）
VITE_API_URL=https://api.example.com

コード内での参照方法も変更します。

// CRA
const apiUrl = process.env.REACT_APP_API_URL;

// Vite
const apiUrl = import.meta.env.VITE_API_URL;

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

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src --ext .ts,.tsx"
  }
}

Vue・Svelte プロジェクトへの対応

ViteはReact以外のフレームワークも公式サポートしています。

# Vue 3 プロジェクト作成
npm create vite@latest my-vue-app -- --template vue-ts

# Svelte プロジェクト作成
npm create vite@latest my-svelte-app -- --template svelte-ts

# vanilla TypeScript
npm create vite@latest my-app -- --template vanilla-ts

Vue 3 の場合は @vitejs/plugin-vue を使用します。

// vite.config.ts（Vue 3）
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueDevTools from 'vite-plugin-vue-devtools';

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(), // Vue DevToolsの統合
  ],
});

Webpack から Vite への移行チェックリスト

大規模プロジェクトでの移行を成功させるために、段階的なアプローチが重要です。

Step 1: 依存関係の互換性チェック

移行前に、使用しているnpmパッケージがViteで動作するか確認します。

# package.jsonの依存関係を一覧化
npm ls --depth=0

# Webpack固有プラグインを洗い出す
grep -r "webpack" package.json

特に注意が必要なパッケージ:

Webpack プラグイン	Vite での代替
`html-webpack-plugin`	Vite標準機能（index.html）
`mini-css-extract-plugin`	Vite標準機能（CSSコード分割）
`copy-webpack-plugin`	`vite-plugin-static-copy`
`webpack-bundle-analyzer`	`rollup-plugin-visualizer`
`DefinePlugin`	`define` オプション
`ProvidePlugin`	`vite-plugin-provide`

Step 2: 段階的な移行戦略

一度にすべてを移行するのではなく、以下の順序で進めます。

開発環境のみ先行移行 - vite dev で開発し、本番ビルドはWebpackのまま
テスト環境での検証 - 全ページの表示確認とE2Eテスト実行
本番ビルドの切り替え - vite build に完全移行
Webpack設定の削除 - 不要になったパッケージと設定を削除

プラグインエコシステムの比較

ViteとWebpackではプラグインの考え方が異なります。

Webpack のプラグインアーキテクチャ

Webpackはローダー（ファイル変換）とプラグイン（ビルドプロセス拡張）の2層構造です。設定が複雑になりやすい反面、細かい制御が可能です。

Vite のプラグインアーキテクチャ

ViteはRollupプラグインAPIを拡張した統一的なプラグインシステムを採用しています。多くのRollupプラグインがそのまま動作するため、エコシステムの恩恵を受けやすいのが特徴です。

主要プラグイン対応表

用途	Webpack	Vite
React Fast Refresh	`@pmmmwh/react-refresh-webpack-plugin`	`@vitejs/plugin-react`（内蔵）
Vue SFC	`vue-loader`	`@vitejs/plugin-vue`（内蔵）
SVGコンポーネント化	`@svgr/webpack`	`vite-plugin-svgr`
環境変数注入	`dotenv-webpack`	Vite標準機能
PWA対応	`workbox-webpack-plugin`	`vite-plugin-pwa`
レガシーブラウザ対応	`@babel/preset-env`	`@vitejs/plugin-legacy`
SSR	`webpack-node-externals`	Vite標準SSR機能
画像最適化	`image-webpack-loader`	`vite-plugin-image-optimizer`

Webpack を使い続けるべきケース

すべてのプロジェクトがViteに移行すべきとは限りません。以下のケースはWebpackが優位です。

Module Federation が必要な場合: マイクロフロントエンドアーキテクチャでWebpack Module Federationを使用中
非常に複雑なカスタムローダーを使用: 独自のWebpackローダーに依存した処理がある
古いNode.js環境: Viteは Node.js 18+ が必要
CommonJS専用モジュールへの依存: 一部のライブラリはESM非対応

ただし、これらの問題もViteの @originjs/vite-plugin-commonjs などのプラグインで解決できるケースが増えています。

まとめ

2026年時点でViteへの移行を検討すべき主な理由は以下の通りです。

開発サーバー起動が数十〜数百倍高速
HMRが常に100ms以下で動作
設定ファイルが簡潔（Webpackの約40%の記述量）
TypeScriptのネイティブサポート
主要フレームワーク（React/Vue/Svelte）の公式推奨ツール