ViteとWebpackの違い — 編集中の確認と、公開用のビルドを分けよう

ひよこ

買い物メモのWebページを編集するとき、ビルドツールは何をしてくれるの？

ペンギン先生

JavaScriptやCSS、画像などを扱いやすい形へ変換する裏方だよ。編集中に確認する開発サーバーと、公開用ファイルを作るビルドを分けると、ViteとWebpackの違いをつかみやすい。

ひよこ

Viteはファイルをまとめないの？

ペンギン先生

従来のESM方式の開発では、アプリのソースを要求に応じて変換して配信する。依存の事前処理もあるし、公開用はバンドルする。開発と本番を一つの説明にしないでね。

ひよこ

Webpackは全部のファイルを読む？

ペンギン先生

入口から依存関係をたどり、設定に応じて変換・まとめる。リポジトリの無関係な全ファイルまで必ず処理するわけではない。キャッシュや分割、ローダーやプラグインも設定できるよ。

ひよこ

Vite 8の内部は前の版と違うの？

ペンギン先生

Vite 8はRolldownを統合した構成。古い版のesbuildとRollupの説明を、そのまま今の版へ当てはめない。使っている版と移行ガイドを確認しよう。

ひよこ

Viteなら必ず一秒で起動する？

ペンギン先生

規模、依存、プラグイン、端末、キャッシュで変わるよ。どんな規模でも瞬時、何倍も速いと一律には言えない。同じ作業と条件で比べるのが大切。

ひよこ

HMRはViteだけの機能？

ペンギン先生

Webpackにもある。ページ全体を再読み込みせず、実行中のモジュールを更新する仕組みだよ。変更や対応状況によっては全体の再読み込みになる。

ひよこ

新しいページはどちらで始めよう？

ペンギン先生

使うフレームワークの公式な導入手順を先に見る。小さなViteプロジェクトで編集とビルドを試すのは入口になるが、フレームワークが別のツールを使う場合もあるよ。

ひよこ

今のWebpack設定は捨てた方がいい？

ペンギン先生

困っていなければ、名前だけで移行を決めない。必要なローダー、環境変数、公開パス、出力、テスト、チームの設定資産を比較する。試すなら小さな別環境で同じ画面を作ってみよう。

まず、「編集」と「公開用」を体験する

新しいViteのvanillaプロジェクトで試します。Node.js 20.19以上または22.12以上とnpmが必要で、テンプレートの要件も確認します。

npm create vite@latest build-shopping -- --template vanilla
cd build-shopping
npm install
npm run dev

端末に出たURLを開き、index.htmlのタイトルを「買い物メモ」へ変えます。変更が反映されることを確認したら、Ctrl+Cで開発サーバーを止めます。

npm run build

公開用のファイルがdistへ出れば、編集を確認する起動と公開用のビルドを体験できました。distができたことと、サーバーへの公開が済んだことは別です。

比較するときの四つの観点

Webpackも単純な構成なら設定ファイルなしで始められます。「Viteは数行、Webpackは必ず数百行」という比べ方では、実際の要件が抜けてしまいます。

HMRと、本番の速さは別

HMRは実行中のモジュールを更新する機能です。両者にありますが、全ての変更で状態を保てるとは限りません。開発の起動時間、変更の反映時間、本番のビルド時間、利用者の画面表示時間は別々に測ります。

もう少し詳しく：移行のチェック

• 必要な変換やプラグインを代替できるか。
• 環境変数や公開パスの扱いが一致するか。
• 同じブラウザーで同じページを表示できるか。
• テストと公開用の出力を維持できるか。

Viteの開発サーバーだけを導入しても、既存の本番ビルドとの違いを確認する必要があります。速度の期待だけで二つの設定を維持する運用を増やしません。

ペンギン先生のまとめ

「ビルドツール」って出てきたら「書いたファイルを、確認・公開できる形に整える裏方」と思えばだいたいOK！ 選ぶ前に、どの作業に困っているかを一つ言ってみよう。

参考資料

• Vite：導入 — 開発と本番・要件
• Vite：背景 — ESM方式と依存の事前処理
• Vite 8の公開 — Rolldown統合
• Webpack：概念 — 入口・依存・拡張・設定なしの開始
• Webpack：HMR — 実行中のモジュール更新