railsのWebpackerを雰囲気だけでも理解する
結論、Webpackerの雰囲気としてはこんな感じ
これだけではあれなのでざっくり解説していく
イントロ(調べようと思ったきっかけ)
railsの開発をしていると、Webpacker
という文字を見つけることがよくあった。
例えば、ターミナルのログで、
[Webpacker] Compiling...
[Webpacker] Compiled all packs in /Users/xxxx/yyyy/zzzz/...
[Webpacker] Hash: xxxxxxxxxxxxxx
みたいな。
よく見かける割に、Webpackerが何者なのか知識ゼロだったので調べてみた。
Railsガイドにも1ページ割かれてるので貼っておく
Webpackerの概要 - Railsガイド
Webpackerとは
Webpackerは、汎用的なwebpackビルドシステムのRailsラッパーであり、標準的なwebpackの設定と合理的なデフォルト設定を提供します。
(Railsガイドより)
「正直言って、webpackもラッパーもよくわかりません」というのが本音。
そんな方いませんか?
数日前の僕もそうでした…
もう少しわかりやすい説明がこちら
Webpackerとは、Webpackを使用してRuby on Rails上でJavaScript開発をするために必要な一連のまとまりを、標準で実装することができるgemパッケージです
(こちらから引用:【基本】webpackerとは何か学ぼう)
JavaScriptが関係してくるんだなということがとりあえずわかる。
そもそもWebpackとは
そもそもWebpackとは何かというと、CSSやJavaScript、画像などのプログラムを作成する際の部品であるモジュールを、1つのファイルとしてまとめるためのモジュールバンドラーです。 Node.jsで、サーバーサイドで動きます。
平たく言うと、WebpackはJavaScriptファイルのコーディングにおいて、開発を効率的におこなうことができるよう助けるような役割を担っているということです(さっきと同じ引用元)
「Webpackとは(中略)モジュールバンドラーです」とのこと。
...ぶっちゃけモジュールバンドラーもよくわかっていない。
モジュールバンドラーとは一言で説明すると複数のモジュールを依存関係を解決して一つにまとめるものになります。
「Webpack とは(意訳)複数のモジュールの依存関係を解決して一つにまとめるもの」らしい。そして、CSSやJavaScript、画像などのプログラムを扱っているようだ。
こちらがWebpackのイメージ画像。確かにひとつにまとめてる。
(この記事にあった:リンク)
Webpackerの役割とは
なんとなくWebpackのやっていることはわかった。ではWebpackerはなんなのか。
Railsガイドには「Webpackerは、汎用的なwebpackビルドシステムのRailsラッパーであり...」とあった。要はwebpackとRailsをつなげるためのものということ。
イメージにすると。
【Webpackerがないとき】
Webpackでまとめられたもの(真ん中の青い丸)をRailsで使いたくても、そのままでは使えない。
そこでWebpackerの登場。
【Webpackerがあるとき】
Webpackerのおかげで、webpackでまとめられたものがRailsにたどり着けるようになった。
このように、RailsとWebpackの橋渡しをするのがWebpacker。
あとがき
調べていると次から次に情報が出てきたが、あまり深追いするとまとめきれないので扱わなかった。
さらに詳しい内容は、railsガイドや引用元の記事でチェックしてみてください
転職を考えている方へ
「転職ドラフト」というサービスを使って、企業から指名を受けてみませんか?
実務1-2年目でも、うまくいけば転職ドラフトで年収数百万UPできるようです(ググると記事が見つかるはず)
登録時に次の紹介コードを入れて、その後レジュメ審査が通過すると、もれなくAmazonギフト券3000円分などのプレゼントがもらえます。
気になっている方はぜひ使ってみてください!
紹介コード:HJGJ
転職ドラフト
Discussion