Webpackerに適用しよう。【エラー集】


過去の記事はwebpackerは捨てて、、、みたいな記事が多かったですが、
Rails6ではデフォルトになる webpackerにいい加減慣れておきます。（もう6はリリースされていますがｗ）

<br>

今まで当然のようにSprocketsに依存していましたが、

```
> Rails.application.config.assets.paths
=> ["/Users/u/file/app/assets/config", 
"/Users/u/file/app/assets/images", "/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/chartkick-3.0.2/vendor/assets/javascripts", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/parsley-rails-2.8.1.0/vendor/assets/javascripts", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/parsley-rails-2.8.1.0/vendor/assets/stylesheets", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/flat-ui-rails-0.0.2/vendor/assets/images", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/flat-ui-rails-0.0.2/vendor/assets/stylesheets", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/bootstrap3-datetimepicker-rails-4.17.47/vendor/assets/javascripts", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/bootstrap3-datetimepicker-rails-4.17.47/vendor/assets/stylesheets", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/momentjs-rails-2.20.1/vendor/assets/javascripts", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/coffee-rails-4.2.2/lib/assets/javascripts", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/actioncable-5.2.2/lib/assets/compiled", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/actionview-5.2.2/lib/assets/compiled", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/activestorage-5.2.2/app/assets/javascripts", 
#<Pathname:/Users/u/file/node_modules>]

```
これを

```
> Rails.application.config.assets.precompile
=> [#<Proc:0x00007fe7e415d528@/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/sprockets-rails-3.2.1/lib/sprockets/railtie.rb:84 (lambda)>, /(?:\/|\\|\A)application\.(css|js)$/]
```
これだけに削減しました。
javascript_include_tagとstylesheet_link_tag　は今回でばいばい。

apps/images以外は、frontend/packs 以下にjsファイルを、 frontend/stylesheets以下にcss系を配置しました。（この辺は他の記事が優秀なので割愛）

## 移行にあたり はまったところ集（エラーと対応方法）
#### 1. manifest.json（public/packsにできる）も最新のコンパイルされたファイルに変更されるが、staging・productionなどで走らせるとローカルでコンパイルしといたファイル（manifest.jsonがあるのに）また Compiling...が走ってしまう。

【解決法】 デフォルトでは、webpacker.ymlのpublic_output_pathはすべて同じなので、一見環境変数による影響がないのかなと思っていましたが、内部的には保持している様子。そのため、RAILS_ENVで指定していないコンパイルだった場合、またCompiling..が走ってしまうようです。

環境によって出力される先（public/packs部分を出し分ける）
当然clobber（削除）するときも環境変数を見ているので、RAILS_ENVを指定しましょう。

 ```
production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false
  public_output_path: packs-production
 ```

#### 2. compiled failed: （空白） で再度Compling...し始める

【解決法】
が表示された場合、理由が見えないので、いったん bin/webpack を走らせて、そうすると理由がわかる。ので、修正して、またcompileさせる


#### 3. Webpackerを入れてるのに「ねえよ」って怒られる
以下でリフレッシュ

```
> yarn install --check-files
```

#### 4. 今までちゃんとbin/webpackできていたのに、急に「jQueryねえよ」って言われだす

```
> yarn upgrade
```

#### 6. ファイルがなく500エラー
【解決法】
コンパイルし直す（dev-server -> productionみたいに変更があった場合にファイルエラー。再度立ち上げ直す。念の為clobberしておく。



----
途中コンパイル関係のエラーはコンパイルしてみないと結果がわからない&コンパイルするのに時間がかかる ので、どうなるかと思ったけど、驚くほどファイル構造がすっきりした。あとはimagesの移行ですね〜。


参考
Rails Asset Pipelineがうまくいかないときの問題の切り分けかた
https://qiita.com/metheglin/items/c5c756246b7afbd34ae2

webpack 4 入門
https://qiita.com/soarflat/items/28bf799f7e0335b68186