Railsつまづいたこと ~webpackでの画像表示~

Webpackerでの画像表示ができない

開発環境は

• Rails 6.0.3
• Ruby 2.7
• Webpacker 4.0

RailsのCSS,Javascript管理について

Railsはバージョン5以前はSprocketsライブラリを使ってアセットパイプラインで(app/assetsフォルダで)CSSやJavascript、Imageを管理していたがバージョン6以後はWebpackerで(app/javascriptフォルダで)管理するようになった。

Rails newをした後、デフォルトでWebpackerが搭載されていてyarnでjqueryやbootstrapをインストールし、environment.jsにも設定を書いていざ画像を読み込む際にエラーがいくつも出てきてしまったのでここに殴り書きする。

エラー①CSS（bootstrap）が読み込めない

上記の手順ではまだbootstrapは読み込まない。webpackerを利用する際はbin/webpck-dev-serverコマンドを実行する必要がある。これはwebpackerでcssやjavascriptファイルのコンパイルを行いサーバーを起動するというもの。このコマンドとrails sの両方を実行する必要がある。

エラー②画像が読み込めない

rails6ではデフォルトでwebpackerの利用を推奨しているが、画像の読み込みをする際はapp/javascript/packsフォルダにあるapplication.js内のconst images = ....の部分のコメントアウトを外さなければならない。