📘 hkob-astro-notion-blog

これまではてなブログにて情報発信をしていましたが、令和5年3月22日より、こちらでの情報発信を始めました。2019年以前の古い記事は過去の Middleman 時代のものなので、情報が古いです。記録のためだけに残しています。
2018-11-07
Rails Webpack

Webpack の設定 - 不定期刊 Rails App を作る(3)

💡
この記事は Middleman 時代に書いた古いものです。記録のため、astro-notion-blog に移行していますが、あまり参考にしないでください。

Webpack の設定をします．

Rails ジェネレータの設定
  1. config/application.rb に Rails ジェネレータの設定を記載する． 以前は config/application.rb に書いていたが，Rails 5 からは config/initializers の下にファイルを記載するように変わったらしい． config/initializers/generators.rb を作成して以下のように記載する． stylesheets, javascripts などを作成しないように設定している． 
    Rails.application.config.generators do |g|
  g.test_framework  false
  g.stylesheets     false
  g.javascripts     false
  g.helper          false
  g.channel         assets: false
end
webpack の設定
  1. app/assets フォルダは使わなくなるので削除 
    rm -rf app/assets
  2. -webpack で作成された app/javascript を frontend に変更(Javascript だけではないため) 
    mv app/javascript frontend
  3. application.html.erb における Javascript と Stylesheet の読み込みを webpack 用に修正 
    <!DOCTYPE html>
<html>
  <head>
    <title>Attendance</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_pack_tag 'application' %>
  </head>

  <body>
    <%= javascript_pack_tag 'application' %>
    <%= yield %>
  </body>
</html>
  4. config/webpacker.yml にて Webpacker の source を修正 
    default: &default
source_path: frontend
source_entry_path: packs
public_output_path: packs
cache_path: tmp/cache/webpacker
  5. コントローラからパーシャルが見つけられるように app/controller/application_controller.rb に prepend_view_path を追加 
    class ApplicationController < ActionController::Base
    protect_from_forgery with: :exception
  prepend_view_path Rails.root.join("frontend")
end
  6. Overmind 用に Procfile を用意 
    server: bin/rails server
assets: bin/webpack-dev-server
  7. tmux や Overmind をインストールしていないなら，homebrew でインストールしておく 
    brew install tmux overmind
スモークテスト

Webpacker が正しく動いているか確認するために，スモークテストを実施する．

  1. テストのためにトップページのコントローラ(pages#home)を作成する(2行目以降は結果) 
    $ bin/rails g controller pages home
Running via Spring preloader in process 51325
      create  app/controllers/pages_controller.rb
       route  get 'pages/home'
      invoke  erb
      create    app/views/pages
      create    app/views/pages/home.html.erb
      invoke  assets
      invoke    js
      invoke    css
  2. config/routes.rb で pages#home を root に設定する 
    # config/routes.rb
Rails.application.routes.draw do
  get 'pages/home'
  root to: "pages#home"
end
  3. app/views/pages/home.html.erb は空にする
  4. frontend/packs/application.js にテストコードを記述する 
    // frontend/packs/application.js
import "./application.css";

document.body.insertAdjacentHTML("afterbegin", "Webpacker works!");
  5. frontend/packs/application.css にテストコードを記述する 
    /* frontend/packs/application.css */
html, body {
  background: lightyellow;
}
  6. データベースを作成しておく 
    > bin/rails db:create
Created database 'attendance_development'
Created database 'attendance_test'
  7. 特にテーブルは作成していないが，migration をしておく(db/schema.rb がないと後で警告が出るため)． 
    bin/rails db:migrate
  8. overmind で rails server と webpack-dev-server を同時に起動する 
    $ overmind s
system | Listening at /Users/hkob/rails/attendance/.overmind.sock
system | Tmux socket name: overmind-attendance-mtQRbKGWqCw8177b47uE2S
system | Tmux session ID: attendance
server | Started with pid 51564...
assets | Started with pid 51567...
server | => Booting Puma
server | => Rails 5.2.1 application starting in development
server | => Run `rails server -h` for more startup options
server | Puma starting in single mode...
server | * Version 3.12.0 (ruby 2.5.3-p105), codename: Llamas in Pajamas
server | * Min threads: 5, max threads: 5
server | * Environment: development
server | * Listening on tcp://localhost:5000
server | Use Ctrl-C to stop
assets | Project is running at http://localhost:3035/
assets | webpack output is served from /packs/
assets | Content not from webpack is served from /Users/hkob/rails/attendance/public/packs
assets | 404s will fallback to /index.html
assets | Hash: 1c16492131c35859b831
assets | Version: webpack 3.12.0
assets | Time: 2653ms
assets |                                                Asset       Size  Chunks                    Chunk Names
assets |                  application-0d7f439cd22fd3507521.js     331 kB       0  [emitted]  [big]  application
assets |     application-6083d2d157eebf492577e2b99556d953.css  155 bytes       0  [emitted]         application
assets |              application-0d7f439cd22fd3507521.js.map     383 kB       0  [emitted]         application
assets | application-6083d2d157eebf492577e2b99556d953.css.map  347 bytes       0  [emitted]         application
assets |                                        manifest.json  310 bytes          [emitted]
assets |    [2] multi (webpack)-dev-server/client?http://localhost:3035 ./frontend/packs/application.js 40 bytes {0} [built]
assets |    [3] (webpack)-dev-server/client?http://localhost:3035 7.93 kB {0} [built]
assets |    [4] ./node_modules/url/url.js 23.3 kB {0} [built]
assets |    [5] ./node_modules/punycode/punycode.js 14.7 kB {0} [built]
assets |    [7] ./node_modules/url/util.js 314 bytes {0} [built]
assets |    [8] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
assets |   [11] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
assets |   [12] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
assets |   [13] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
assets |   [14] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
assets |   [16] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
assets |   [21] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
assets |   [23] (webpack)/hot/emitter.js 77 bytes {0} [built]
assets |   [25] ./frontend/packs/application.js 129 bytes {0} [built]
assets |   [26] ./frontend/packs/application.css 41 bytes {0} [built]
assets |     + 16 hidden modules
assets | Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--1-2!node_modules/postcss-loader/lib/index.js??ref--1-3!frontend/packs/application.css:
assets |        [0] ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./frontend/packs/application.css 539 bytes {0} [built]
assets |        [1] ./node_modules/css-loader/lib/css-base.js 2.26 kB {0} [built]
assets | webpack: Compiled successfully.
  9. ブラウザで localhost:5000 にアクセスして，以下のような画面が表示されれば Ok
    image block
  10. ここで frontend/packs/application.js のメッセージを書き換えると，自動的にブラウザの表示が書き換わることを確認する

長くなったので今日はここまで

Rails Webpack