Help us understand the problem. What is going on with this article?

webpackを改めて調べた

More than 1 year has passed since last update.

はじめに

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を改めて調べてみたら、すごく便利なものということがわかりました。
調べてスッキリした。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away