【うぇぶぱっく】
Webpack とは？
最終更新:
💡 依存するモジュールを配信用にまとめる
JavaScriptアプリの入口から依存関係をたどり、必要なモジュールをバンドルなどの配信用ファイルへまとめるツール。loaderやpluginで処理を拡張でき、出力を複数に分けるコード分割にも対応する。
📌 このページのポイント
ひよこ Webpackって何のために使うの？
ひよこ 全部1つのファイルになるの？
ペンギン先生 ひよこ loaderとpluginはどう違うの？
ペンギン先生 loaderは特定の種類のファイルをモジュールとして使える形へ変換するものだよ。TypeScriptなどの変換にも使える。pluginはバンドルの最適化やアセット管理など、ビルド全体に関わる広い処理を拡張するんだ。
ひよこ 設定ファイルがないと使えない？
ペンギン先生 基本の入口や出力には既定値があり、設定ファイルなしでバンドルすることもできるよ。入力や出力、変換処理を変えたいときはwebpack.config.jsなどで設定する。必要な設定はアプリの構成によって違うんだ。
ひよこ 開発中のホットリロードって何？
まとめ：ざっくりこれだけ覚えればOK！
「Webpack」って出てきたら「依存するモジュールを配信用にまとめるツール」と思えばだいたいOK！
📖 おまけ：英語の意味
「webpack」 ＝ Webとpack（まとめる）を連想する名前
💬 Webで使うモジュールをまとめる役割と結び付けると覚えやすいよ。