webpackが何なのかを自分なりに調べてまとめた
882 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
私はwebpackが何なのかを知らずに使っていてこれはよくないと思い調べました。
webpackとは
複数のファイルを１つにまとめて出力してくれるツール（モジュールバンドラと言い複数ファイルをまとめる事をバンドルと言います）です。
メインの使い方としてjsのバンドルですがcssや画像もバンドルできるみたいです、これはgulpでもできます。
利点
以下の場合にメリットがあります。
- 機能ごとにファイルを分ける事ができる
- 読み込みを減らせる
どういう事かを説明します。
機能ごとにファイルを分ける事ができる
1つのファイルに全てを書くと後で修正する時にどこにあるのか探すのが大変になりますがwebpackは分割したファイルをまとめるので機能ごとにjsを書く事ができて探すのが楽になるのと修正がやりやすくなります。
読み込みを減らせる
サイトを作っているとイメージしやすいのですが読み込みが多ければ多いほどサイトが表示されるまでに時間がかかって閲覧者がイライラしますが1回の読み込みで済むなら表示までの時間がそんなにかからないはずです。
gulpとの違いは？
業務でgulpを使いますがscssの変換・jsの圧縮・cssの圧縮・ブラウザシンク・画像のwebp化はできます。
じゃあわざわざwebpackを使わなくてもgulpだけで済むのでwebpackを使う決定的なメリットがあると思って調べました。
バンドルが速い
webpackはモジュールバンドラなのでバルドルが強くファイルの更新前と更新後の差分のみバンドルする事ができます。
だからいーっぱいのファイルがある場合はwebpackが強いと思います。(いーっぱいファイルがある状態で使ってないから分からないのですが)
WEB制作会社だと〜10ページにjsを振るみたいな場合じゃない限り使わないのではないでしょうか？
と言った所です。
業務でgulpを使うので個人的に開発する時にgulpを使うのは面白くないのでwebpackを使っています。