Webpackerざっくりまとめ

Webpackerとは

Webpackを簡単に導入するためのgem。
本来webpackを導入する時にはwebpack.config.jsに色々設定を書かないといけないが、デフォルトでそれっぽい設定をしてくれる。

カスタマイズに難があるので、嫌っている人もまあまあいる。

AssetPipelineじゃダメなのか

AssetPilelineでJavaScriptを管理すると、npmのモジュールを使うことができないので、、

じゃあAssetPipelineは必要ないのか

WebpackとAssetPipelineの併用が基本。
本来webpackではJavaScript、CSS、画像の全てを管理するけれど、
WebpackerではJavaScriptだけを管理して、CSSと画像はAssetPipelineに乗せるのが主流っぽい。

WebpackerでCSSとか画像を管理することもできるし、そういう記事も割とあるけど、Rails6のデフォルトはJavaScriptだけを管理するようになっている。

構成

app
 └── javascript
 │    └── channels
 │    └── packs
 │         └── application.js # エントリーポイント。全てのjsファイルがここに集約される。
 │    └── src # 処理を記述するファイルを保存するディレクトリ。自分で作る。名前は自由
 │         └── hoge.js
 │         └── fuga.js
config # 設定ファイル
 └── webpack
 │    └── development.js
 │    └── environment.js
 │    └── production.js
 │    └── test.js
 └── webpacker.yml

src以下に処理を書いて、packs/application.jsから読み込む。

app/javascript/packs/application.js

//デフォルトの記述
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import 'src/hoge'

app/javascript/src/hoge.js

console.log('hogehoge')

参考

• Rails 6 における Webpacker デフォルト動作 - ボクココ