Webpack（モジュールバンドラー）について

Webpackとは複数のモジュール（独立した機能などのまとまり）を１つにバンドル（まとめる）し、１つのjs（JavaSciprt）ファイルに出力してくれるツールです。

これらはブラウザのimport、export機能でも可能ですが、以下のメリットを得たい場合、Webpackを活用します。

通信量の削減　ブラウザが１回のHTTPリクエストで複数ファイルを所得できる。
CSSの最適化　jsファイルの中にcssもまとめて出力可能、加えてJavaScriptと同様に、cssも不要なスペースやコメントを取り除いたり、変数を短縮したりしてサイズを小さくしてくれる。
TypeScript/SASSなどの同時変換　loaderと呼ばれるプラグインをインストールすることで、コード実行に必要な作業を一緒に行ってくれる。
画像の最適化　画像圧縮や遅延読み込みなどの最適化を自動化できる。

Webpack導入方法

VSCodeにバンドルしたいフォルダを表示または作成

Macの場合、commad+Jでターミナルを開く

Node.js（サーバーサイドでもJavaScriptを実行する環境）をインストール

Node.jsとnpmのインストールを確認（バージョン情報が表示されればOK)

node -v
npm -v

Node.jsのプロジェクトを初期化（どちらかのコマンドを）

npm init　→（enter連打でOK）　
npm init -y　（連打なし）

webpackをインストール

npm i -D webpack webpack-cli

３つの管理フォルダまたはファイル（package.json、package-lock.json、node_modules）が作成されます

webpackでバンドル

npx webpack

warning(警告）はとりあえず気にしない
dist/main.jsが作成されれば成功です

ファイルの変更時、自動的に再バンドルするための設定

npx webpack –watch