webpackを用いたフロントエンド開発環境の構築その1

↓YOUTUBEでも解説しています↓

webpackとは

※モジュールバンドラは複数のファイルをまとめてくれるツール

ファイルをまとめるだけではなく、webpackに備わるローダーやプラグインの機能を活用することにより、jsをbabelでトランスパイルしたり、Sassをコンパイルしたりすることができる

webpackの用語

モジュール	エントリーポイントを除いた、バンドルの対象となるファイルのこと
エントリーポイント	ファイルをまとめる際の起点となるファイル
バンドル	まとめられたファイルのこと
ビルド	バンドルを出力するまでの一連の処理のこと
ローダー	jsファイル以外(css、画像)はそのままだとバンドルできないため、一旦jsファイルに変換する必要があり、その処理を行ってくれる(全てのローダーが、上記のような機能というは訳ではない)
プラグイン	webpackの機能を拡張するためのプログラム。プラグインはモジュールをバンドルする際に実行される

webpackのメリット

・ファイルを分割して開発することができる

　機能ごとにファイルを分けて開発をすることによって、コードが整理されて開発効率、保守性が上がります

・外部モジュール(サードパーティのモジュール)を容易に導入することができる

・依存関係を解決したファイルを出力して利用することができる

＜依存関係が解決できていない＞

例えばhtmlファイルに複数のjsファイルを読み込んでいる場合、順番が変わったりするだけでアプリが動作しなくなってしまったりする可能性がある

＜依存関係が解決できている＞

htmlファイルに読み込ませるjsファイルを最終的に1つにしてしまえば、読み込み順などを気にする必要がなく、依存関係を解決することができる

・出力するファイルを最適化することができる

圧縮によるパフォーマンス向上や、冗長な記述を修正してくれたりする

その2はこちらから