TECH BLOG

【Rails】webpacker-dev-server実行中のエラー「Could not freeze ... Cannot read property 'hash' of undefined」

2020-08-30

# はじめに `webpacker-dev-server`実行中に、突然以下のエラーが出力されました。 ``` [hardsource:3154a74b] Could not freeze ./app/webpack/packs/application.js: Cannot read property 'hash' of undefined (node:69641) UnhandledPromiseRejectionWarning: TypeError: current. [...]

【Rails】Webpacker管理下の構成を整える

2020-08-31

# はじめに Rails6で標準導入されたWebpacker管理下の構成を整えたので記事にします。Webpackerで管理対象としているのは以下の3つです。 - JavaScript - CSS - 画像あくまで自分なりにわかりやすい構成に整えたという話ですので、ベストプラクティスを提案するとか言った大それたものではないことはご了承ください。もっといい構成や命名があればぜひ教えてください。 # 構成を整える ## ソースパス（エントリーポイント [...]

【Rails】Webpacker管理下のアイコン画像をFaviconに設定する方法

2020-08-30

# はじめに Rails6から標準導入されたWebpackerで画像を管理し、その中のアイコン画像をFavicon（タブやお気に入りに表示されるアイコン）に設定する方法を解説します。 # Favicon設定方法 ## 画像の用意まずはFaviconに設定する画像を用意します。今回はフリーで使用できるアイコンを使うことにします。ちなみにPNG画像でもFaviconに設定できます。 <div style="text-align:center;"> <img [...]

【Rails】Webpackerで画像ファイルを管理し、CSSやビューから参照する方法

2020-07-30

# はじめに Rails6から標準導入されたWebpackerは、JavaScriptやCSSだけでなく画像ファイルの管理も行えます。今回はWebpackerで画像ファイルを管理し、CSSやビューから参照する方法を解説します。 # 画像ファイルの配置場所 Webpackerで画像ファイルを管理するには、Webpackerのデフォルトソースパス（`app/javascript/`）配下に`images`ディレクトリを新規作成し、その中に画像ファイルを配置します（ディレ [...]

【Rails】Webpacker管理のCSSがHerokuで反映されない場合の対処

2020-07-30

# はじめに Rails6から標準導入されたWebpacker（Webpack for Rails）でCSSを管理しているRailsアプリのCSSが、ローカル開発環境では反映されていたのに、デプロイ先のHerokuでは反映されないという事象がありました。 # 対処 `app/views/layouts/application.html.erb`を以下のように修正します。 ```erb # 修正前 <%= stylesheet_link_tag 'applicati [...]

Rails6から標準導入されたWebpackerでjQueryとBootstrapを管理する方法

2020-02-10

# はじめに Rails6からWebpackerが標準導入されるようになりました。今までjQueryやBootstrapを導入するには、それぞれのGemをインストールして`app/assets/javascripts/application.js`や`app/assets/stylesheets/application.scss`で組み込むということをしていましたが、せっかくなので標準導入されたWebpackerでjQueryとBootstrapを管理するようにしましょう。 [...]