はじめに

Ruby on RailsでVue.jsを使ってみようと思い調べたところ、webpackerというものが便利だと知ったものの、色々調べていくと「webpack」や「モジュールハンドラ」、「npm」、「yarn」とかイマイチ何を言っているのか理解できず怖くなったので調べてみた結果をまとめておきます。

webpackってなに

webpackerについて調べていたのにwebpackという単語が多数ヒットしたので、まずはwebpackとはについてです。
webpackとは、モジュールハンドラツールのことを指しています。

モジュールハンドラってなに

モジュールハンドラとは、複数の機能に分割（モジュール化）されたファイルをまとめて出力するためのツールのこと

ではどんなファイルをまとめるのかというと、JavaScriptファイルだったり、cssファイルだったり画像ファイルもまとめることができます。

現状を簡単にまとめると、「様々な機能に分割されたファイルをwebpackを利用することで、いい感じに1つのファイルにまとめて渡してくれるすごいやつ」がwebpackです。
（設定によって複数ファイルの出力も可能）

webpackのメリット

webpack(モジュールハンドラ)を使うメリットとは

機能ごとにファイルを分割して管理ができる

webpackが複数ファイルをまとめて出力してくれるおかげで、機能ごとにファイルを分割して管理することができます

では分割することのメリットとは

コードが見やすくなる
変数の競合、グローバル汚染を防ぐことができる
開発作業を複数人で分担することが容易になる
リクエスト数を減らせる

依存関係に悩まされない

複数に分割されたファイルをwebpackが依存関係を解決した状態でまとめて出力してくれるため、依存関係について悩まされない

依存関係について分かりやすい説明があったので引用させていただきます

<body>
<!-- app.jsはjQueryに依存しているため、jQueryを読み込んだ後に読み込む必要がある。 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/app.js"></script>
</body>

上記のようなファイルは以下の懸念点がある。

依存しているライブラリが1つだけなら良いが、依存が増えれば増えるほど依存関係がわかり辛くなる。

それぞれのファイルの依存関係をすぐに理解できるのは作業をした人間のみであり、別の作業者が依存関係をすぐに理解するのは困難。

依存関係が複雑になればなるほど、迂闊にスクリプトの読み込み順を変更したり本来不要なファイルを削除できなくなる。

webpack4入門 | Qiita

webpackerってなに

調べ始める前はwebpackとwebpackerを混合していました。

webpackerとは、webpackをRuby on Rails上で簡単に利用するためのGemのことを指します。
Railsでは、アセットパイプラインというモジュールハンドラが使われています。ただ日々進化し続けるフロントエンド開発に対応すべくwebpackというモジュールハンドラをRailsへ簡単に導入するためのGemをwebpackerと呼びます。

そしてRailsで開発していくからといって、必ずしもGemであるwebpackerを導入しなくてはならないのかというと、そうではなくwebpackを選択することもできます。

Gemであるwebpackerは、webpackに比べカスタマイズ性に優れていないというデメリットがあります。

npm と yarnってなに

この2つは役割が似ているためまとめます

npm(Node Package Manager)

正式名称を見たらなんとなく、理解しやすくなった。
npmとは、Node.jsのパッケージを管理するためのツールのこと。

Node.jsのパッケージとは

パッケージとはNode.jsの便利な機能をまとめたかたまりのようなもの

yarn

yarn(ヤーンって読むらしい)とは、Facebookが公開した、JavaScriptのパッケージを管理するためのツールのこと

npmもyarnもパッケージ管理ツールということもあり、比較されている記事が多く見つかりました。基本的に利用目的は似通っている

npmとは | Qiita
yarnとは | Qiita

参考

webpack | 公式
webpacker | Github

【5分でなんとなく理解】Webpack入門 | Qiita
webpack4入門 | Qiita
Rails5.1ではAsset Pipeline捨てたほうがいいらしいので捨ててみた | Qiita
npmとは | Qiita
yarnとは | Qiita