この記事について
webpackとは何かという概念を理解することを目的としています。
記事のサマリ
webpackとは、
- モジュール管理システム（モジュールバンドラー）
モジュール管理システムとは、
- プログラムはモジュールの集まりでできており、そのモジュールの構成や依存関係を管理する。
- プログラム(機能)がどう構成されているかを先にざっくりイメージできると、理解しやすい。
モジュールとは、
（とりあえずここでは、）ファイルと同義で扱います。sample.jsや、sample.docxのような拡張子のついたもの。
1. プログラム（機能）の中身
- 一つのプログラム（機能）を実行した時の処理量が多かった場合、そのプログラム（機能）が一つのjsファイルだけで構成されていては、そのjsファイルは何千行、何万行にもなってしまうかもしれない。
- 多くの処理が一つのjsファイルに記述されていては、作るのも修正するのも大変。
- 処理は上に書かれたコードから順番に実行されていくので、一つのjsファイルに全部の処理を記述するのでは実現できる処理も限られてくる。
プログラム（機能）は複数のモジュールから構成されている
- プログラム（機能）を作成する際には処理内容ごとに複数のモジュールを作成する。
- それらのjsファイルは必要な時に適宜呼び出され実行される必要がある。
モジュールの構成や依存関係をモジュール管理システムが管理
- どのjsファイルを・いつ・どのjsファイルと一緒に（等々）実行するか決めておく必要がある。
2. webpackのインストール方法
方法１ ディストリビューション公式パッケージマネージャ経由でインストール
- Linux環境の場合、ディストリビューションがパッケージを提供している場合がある。
方法２ npm経由でインストール
- webpackはJAvaScriptで実装されているので、Node.jsのパッケージマネージャであるnpm経由でもインストールできる。
導入方法や実際の利用例などは、
【さくらのナレッジ】面倒なJavaScriptコードのとりまとめがこれ1つで可能に、「webpack」入門
こちらの記事の解説がとってもわかりやすいです。