まずは、これだけ
ビルドツールは開発を助け、配信用ファイルを作る道具。
バンドラーは、その中で複数ファイルの依存関係を整理してまとめます。
開発中と公開時では、都合のよい形が違う
開発中は機能ごとにファイルを分けると作業しやすくなります。一方、公開時はブラウザが効率よく読み込める形に整えたいことがあります。その変換を自動化するのがビルドツールです。
変換
新しい記法などをブラウザで動かせる形にする。
最適化
不要部分を減らし、ファイルを小さくする。
開発補助
保存した変更を素早く画面へ反映する。
開発用のファイルを直接公開する場合もありますが、大規模なアプリでは、圧縮、ファイル名の付け替え、古いブラウザ向けの変換などを自動化すると公開作業を安定させやすくなります。
バンドラーはファイルのつながりを整理する
JavaScriptが別のファイルを読み込む関係をたどり、必要なものを配信用にまとめる役割をバンドルと呼びます。現在のツールは、必要に応じて複数の配信ファイルへ分けることもあります。
1読み込み口起点のファイル
2依存関係必要なファイルを追う
3変換利用可能な形へ
4最適化不要部分を減らす
5出力配信用ファイルを作る
Viteとwebpackは何が違う？
webpackはバンドラーとして広く使われてきた代表例です。Viteは開発サーバーを高速に動かし、公開用のビルドもまとめて扱えるビルドツールです。役割が重なる部分はありますが、同じ種類の名前とは限りません。
webpack
依存関係をたどってファイルをまとめる代表的なバンドラー。
Vite
高速な開発環境と公開用ビルドを提供するビルドツール。
使わない選択
単純な静的サイトなら、ビルドなしで公開する構成も十分使える。
開発中にも作業を助けてくれる
ビルドツールは公開ファイルを作るだけではありません。開発用サーバーを起動し、ファイルを保存した瞬間にブラウザへ変更を反映するなど、日々の作業も自動化します。
ただし、ツールが増えるほど設定やバージョン更新の知識も必要になります。HTML・CSS・JavaScriptをそのまま配信できる小さなサイトでは、ビルドしない構成のほうが分かりやすい場合もあります。
ここまでのまとめ
ビルドツールは開発から公開までの作業を整え、バンドラーはファイル同士のつながりを配信用に整理します。