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')