webpackについて、なんとなくしか知らなかったのでまずは概要から。

webpackとは

複数のjavascriptファイルを1つのjavascriptファイルにまとめてくれます。

メリット

WEBページの負荷の軽減

As is

少し前まではWeb画面は色々な機能(役割)をもつjavascriptファイルで構成され、そのファイル1つ1つはブラウザからHTTPリクエストで読み込まれていました。
なので、webページにHTTPリクエスト分負荷がかかります。

To Be

Javascriptファイルを1つにまとめることで、不要なリクエストを減らし、WEBページの負荷が軽減されます。
As Is では2回HTTPリクエストが行われていましたが、このように1回のHTTPリクエストで済みます。

背景

ReactやView.js、TypeScriptによりjavascriptもライブラリやフレームワークのようなもので開発されることが多くなりました。これらは結局のところjavascript形式で動作させなくてはいけません。
例えば React のプログラムを書いたところで、それはそのままで実行できません。javascriptの形式にコンパイルしないと動作しません。このようにjavascriptもコンパイラが必要になる時代となりました。

どうしてweb pack?

webpackはメリットで述べたように複数のjavascriptファイルを一つにまとめてくれます。
ついでにコンパイルもしたいですよね？
webpackはこれらを両方やる事が出来る便利なツールになります。

次回

webpackは最終的にwebページで必要なjavascriptをファイル1つにまとめて(バンドルして)作成してくれる(ビルドしてくれる)便利なツールです。

次回はwebpackを実行してみます。