webpackとは

1. Webアプリケーションを作成する際に必要な、
   様々なJavaScriptをひとまとめに管理する為のツール
2. モダンなWebアプリケーション開発では、
   様々なJavaScriptライブラリを用いる為、その依存関係を管理してくれる

以前取り上げた機械語と人間語とも関連しています。

webpackの公式ドキュメントこちらも参考として添付します。

webpackが行うこと

基本要素	読み	役割
Entry	エントリー	依存関係を解決するために、 どのファイルを基準（エントリーポイント）とするかを決める
Output	アウトプット	エントリーポイントにされ、 webpackによってまとめられたファイルを、 どこへどのような名前で出力（アウトプット）するのか指定する
Loaders	ローダー	JavaScript以外のCSSやHTMLなどのファイルを モジュールに変換する方法を読み込み（ロード）、指定した処理を行う
Plugins	プラグイン	圧縮などの、ファイルをまとめる以外で ローダーが実行できないタスクを導入し、拡張（プラグイン）する

webpackを用いることで、JavaScriptのライブラリとJavaScript以外の
さまざまな言語を、変換・圧縮した上で、好きな場所に配置することが可能

WebpackerというGem

Railsにもwebpackを導入してコマンドによる操作が可能だが、
設定ファイルの記述がやや難しくなっている
そのため、設定を簡易化してくれるWebpackerというGemを使用

Webpacker

webpackをRails仕様にし、専用の設定ファイルやヘルパーメソッドを用意してくれるGem

Railsバージョン6系以降からは、デフォルトでWebpackerが導入される

近年のフロントエンド技術の台頭により、
（主には、JavaScriptのライブラリが充実してきたこと）
Sprocketsからwebpackを利用する方針へ転換された

Webpackerの公式GitHub

Webpackerによって、
Sprocketsのアセットパイプラインと同じような静的ファイルのプリコンパイルに加え、
JavaScriptのパッケージが利用できるようになる