個人的勉強メモ置き場

プログラミングど素人のメモ置き場

Webpack(er)メモ

Ruby on Rails

Webpack(er)とは

Webpackerは、汎用的なwebpackビルドシステムのRailsラッパーであり、標準的なwebpackの設定と合理的なデフォルト設定を提供します。

https://railsguides.jp/webpacker.html

railsでwebpackをいい感じに設定して使えるようにしてくれるgem。rails6.0以降からデフォルトでインストールされている。

webpackは「JavaScript」「CSS」「画像やフォント」といった静的アセットを管理できます。webpackを使うと、「JavaScriptコードの記述」「アプリケーション内の他のコードの参照」「コードの変換（トランスパイル）や結合」をダウンロードしやすいpackにまとめられます。

https://railsguides.jp/webpacker.html

javascriptをwebpackerで扱う

webpackerではapp/javascript/packsにエントリーポイントを配置する。デフォルトではpacks/application.jsがエントリーポイントとなっているので

  • app/views/layouts/application.html.slim
 = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'

エントリーポイントからコンパイルされたjsファイルパスを取得できる

CSSをwebpackerで扱う

メインのSCSSとしてapplication.scssを作成してimport

$ mkdir app/javascript/stylesheets
$ touch app/javascript/stylesheets/application.scss
import "../stylesheets/application"

Webページで読み込むには同じようにビューコード内に記述

  • app/views/layouts/application.html.slim
= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'

ついでにbootstrap5を導入

  • コンソール
$ yarn add bootstrap@next
$ yarn add @popperjs/core
@import "bootstrap";
import "bootstrap"
import "../stylesheets/application"

これで(たぶん)OK