はじめに
webpack をなんとなく使っていて、ちゃんと理解していないなと思ったので改めて調べてみました。
備忘録として残します。
webpack とは
「webpack」 = 「モジュールを束ねるツール」
「モジュールバンドラー」ともいう。
モジュールとは?
→プログラム内のJSファイルやsassファイル等のこと。
webpackで何ができる?
下記の 1〜4 を全て1つのJSファイルにまとめてくれます。
1. 自分で書いたJS
2. ライブラリとして読み込んでいるJS
3. 2で読み込む必要があるCSS
4. 3で読み込む画像
何が嬉しいの?
「1つのJSファイルにまとめてくれる」とは、すなわち
「JSファイルを細かく分けて管理ができるようになる」
ということ。
1ファイル1クラスとか1ファイル1モジュールとか細かく分けて作れるようになる。
↓
↓ すると、こんな嬉しいことが!
↓
- コードが読みやすくなる
- テストがしやすくなる(保守性が高い)
- 他のプロジェクトに転用しやすくなる
- 担当分担ができるようになる
しかも、HTML側が呼ぶファイルは1つにまとめたJSファイルのみ。
→ファイル読み込み時間の短縮にもなる。
おわりに
webpackを改めて調べてみたら、すごく便利なものということがわかりました。
調べてスッキリした。