webpack
https://gyazo.com/a1f06ce6857e2bf17dfb1f66d6079fd3
https://ja.wikipedia.org/wiki/Webpack
webpackは、オープンソースのJavaScriptモジュールバンドラーである。これは主にJavaScript用に作成されているが、対応するローダーが含まれている場合は、HTML、CSS、画像などのフロントエンドアセットを変換できる。webpackは依存関係のあるモジュールを受け取り、それらのモジュールを表す静的アセットを生成する。
Webpackは依存関係を取得し、依存関係グラフを生成して、Web開発者がWebアプリケーション開発の目的でモジュラーアプローチを使用できるようにする。コマンドラインから使用し、webpack.config.jsという名前の構成ファイルを使用して構成を行うことができる。このファイルは、プロジェクトのルール、プラグインなどを定義するために使用される（webpackは、開発者がファイルをバンドルするときに実行したいカスタムタスクを記述できるようにするルールを介して、高度に拡張可能である）。
webpackを使用するには、Node.jsが必要である。
https://webpack.js.org/
https://gyazo.com/0bb88f83eb0aa6b94f9a6c5bb1c4b1cb
(画像は上記サイトより）
最新版で学ぶwebpack 5入門 - JavaScriptのモジュールバンドラ - ICS MEDIA
一番多い使い方は、複数のJacaScriptを１つにまとめること
利点
モジュールが使える
export fucntion みたいな書き方
転送の最適化
１つのファイルにまとめることでリクエスト数をへらす
CSSや画像もバンドルできる
webpack.config.js でカスタマイズできる
development か producion 向けか mode を切り替えられる