Webpackとは？
- モジュールバンドラのこと。
モジュールバンドラとは?
- 複数のモジュールを1つにまとめたファイルを出力するツールのこと(※出力設定によっては複数のファイルを出力することもあります)
webpack以外にモジュールバンドラはあるの？
- Browserify
- RequireJS
使うメリットは？ 3つあります
- webpackが依存関係を考慮して１つのファイルにまとめてくれるので、開発者は依存関係を一切把握する必要はなくなりました。
- また、ファイルが１つになることでブラウザがWebアプリケーションを提供する時に読み込むファイルが減り、これに伴いHTTPリクエストの回数も減ることでユーザーに素早く画面を提供できるようになる。
- HTTPリクエストの効率は、要求されているファイルの数とサイズに正比例しますので、大規模なWebアプリケーションになるほど、Webpackの役割は重要になります。
どこで使えるの？
Node.jsの実行環境で使えます
どうすれば使えるの？
npmコマンドから導入し、コマンドを実行すれば使えます（下は開発環境のみで使う場合）
$ npm install webpack webpack-cli --save-dev
設定ファイルは？
webpack.config.js
まだピントこないんだけど。。。
-
複数のjsファイルを書いた後に、コマンドでそれら全てのjsをまとめた1つのファイルをつくるよ。
-
ブラウザに表示するときはそのファイルだけを読むから表示も早くなる
これでイメージ湧きますか？
そもそもwebpackが必要になったの？
JavaScriptが人気になり、規模が広がりたくさんの機能が生まれた結果
依存性の解決、必要な時に機能を使うための仕組みが必要になったから
JavaScriptのモジュールの歴史
JavaScript のプログラムはとても小さいものから始まりました。
初期の用途は、jqueryなど必要に応じてウェブページにちょっとした動きを追加する独立したスクリプト処理がほとんどでした。
今や大量のJavaScriptで書かれたアプリケーションまで生まれるようになりました。（Angular , Reactなど）
そのため近年は、JavaScript プログラムをモジュールに分割して必要な時にインポートできるような仕組みの提供が検討されるようになったのです。
Node.js(2011~)は長年この機能を提供しています。
モジュールの利用を可能にする JavaScript ライブラリーやフレームワークも数多くあります
(例えばCommonJS やRequireJS など最近では Babel)。
2015年にES modulesというES2015仕様において策定された、JavaScriptファイルから別のJavaScriptファイルを読み込む仕組みが生まれました。
webpackの場合はこの標準仕様のES Modulesが使えたり、node_modulesのモジュールを結合できるといったメリットがあります。
詳しくはこちら
JavaScriptのモジュールシステムの歴史と現状