【Rails】webpackerの構成を✅ - subaru-hello’s blog

クリスマスイブだからいいよね、年末だからいいよね、が積み重なってデブにならないか危惧している23期中野昴こと「クリスマスプレゼントをまだ買えていない」です。

今回は、jsがデバイスごとに挙動が違うというissue https://github.com/subaru-hello/Zeroken/issues/107の解決を試みた話になります。

まず「 javascript iphone 動かない」や「javascript 本番環境キャッシュ」などでググったところ、webpackerに原因があるのでは？という記事が多く掲載されていました。

webpackerを理解するために取り急ぎwebpacker.ymlを学習していきたいと思います。

webpacker.ymlとは

メインディレクトリconfig配下にあるwebpacker gemを管理するymlファイル(ファイルの書き方ルールのひとつ)。

Webpackと呼ばれる、「それぞれが依存関係にあるjs,scss,imageなどのファイルををまとめて静的アセットにバンドルするモジュールバンドラー」をRuby on Railsで使うために作られたのがwebpacker。webpackerの構造を管理するのがwebpacker.yml

下記のような構造で書かれている

app/javascript:
  # Only Webpack entry files here
  └── application.js
  └── application.css
  └── src:
  │   └── my_component.js
  └── stylesheets:
  │   └── my_styles.css
  └── images:
      └── logo.svg

production,development,test環境のそれぞれをconfig/webpacker.ymlひとつが下記のように管理している。

config
│   ...
├── webpack
│   ├── development.js
│   ├── environment.js
│   ├── production.js
│   └── test.js
└── webpacker.yml

そのため、ローカルで動いたjavascriptやcssが本番では機能しない、、といった不具合の原因はここにある可能性が高い。そう感じている。

webpacker.ymlの構造を紐解く

source_path: app/javascript

webpackによってバンドルされるソースファイルをまとめる場所。

ソースエントリーパスが配置されている。このjavascriptという記述はfrontendという名前に変えたりする事ができる。images,cssといった静的アセットを使わない場合にfrontendと名前を変更する事が多い。

source_entry_path: packs

application.js、いわゆるエントリーポイントをここに書く。

public_root_path: public

source_pathのファイルがバンドルされた結果が出力される場所。

public_output_path: packs

manifest.jsonが出力される場所。

cache_path: tmp/cache/webpacker

再コンパイルの処理速度を高めるために、キャッシュを保存しておく場所。

sorth_path内の.jsに変更が加えられた際に差分を更新する必要がある。この、差分のみ更新すればいいのか、それとも全て更新しなくてはならないのか、で処理速度が変わるわけで、「差分のみを更新する」ことを実現してくれるのが、cache_path

webpack_compile_output

compileされた結果を出力する場所

基本的にtrueにしておくのがベター。俺は絶対ミスしないという自信があるのであればfalseにしてもいい？

cassh_manifest

The cache_manifest setting simply tells Rails whether we want to maintain the parsed manifest in Ruby memory.

頻繁にソースコードを更新する場合、cash_manifestをfalseにしておくことがベターとされている。

extract_css

extract_css: false is helpful for development; most applications will want to set extract_css: true in production.

webpackerによってバンドルされたcssファイルをアウトプットする方法が二つあり、assets pipelineから取り除きたいcssファイルをapplication.cssとして切り出しておく方法と、ブラウザーがロードされたタイミングでjavascriptが動的にページへcssを挟み込む方法がある。

開発環境ではfalse,本番環境ではtrueにしておく事が好ましい。