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

RailsApp Rails Webpack 2018年 11月 7日

Webpack の設定をします．

Rails ジェネレータの設定

  1. config/application.rb に Rails ジェネレータの設定を記載する． 以前は config/application.rb に書いていたが，Rails 5 からは config/initializers の下にファイルを記載するように変わったらしい． config/initializers/generators.rb を作成して以下のように記載する． stylesheets, javascripts などを作成しないように設定している． 
    2. 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 フォルダは使わなくなるので削除
    2. rm -rf app/assets
  2. --webpack で作成された app/javascript を frontend に変更(Javascript だけではないため)
    3. mv app/javascript frontend
  3. application.html.erb における Javascript と Stylesheet の読み込みを webpack 用に修正
    4. <!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 を修正
    5. 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 を追加
    6. class ApplicationController < ActionController::Base
    protect_from_forgery with: :exception
  prepend_view_path Rails.root.join("frontend")
end
  6. Overmind 用に Procfile を用意
    7. server: bin/rails server
assets: bin/webpack-dev-server
  7. tmux や Overmind をインストールしていないなら，homebrew でインストールしておく
    8. brew install tmux overmind

スモークテスト

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

  1. テストのためにトップページのコントローラ(pages#home)を作成する(2行目以降は結果)
    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 に設定する
    3. # 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 にテストコードを記述する
    5. // frontend/packs/application.js
import "./application.css";

document.body.insertAdjacentHTML("afterbegin", "Webpacker works!");
  5. frontend/packs/application.css にテストコードを記述する
    6. /* frontend/packs/application.css */
html, body {
  background: lightyellow;
}
  6. データベースを作成しておく
    7. > bin/rails db:create
Created database 'attendance_development'
Created database 'attendance_test'
  7. 特にテーブルは作成していないが，migration をしておく(db/schema.rb がないと後で警告が出るため)．
    8. bin/rails db:migrate
  8. overmind で rails server と webpack-dev-server を同時に起動する
    9. $ 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
    10. test画面
  10. ここで frontend/packs/application.js のメッセージを書き換えると，自動的にブラウザの表示が書き換わることを確認する

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

前の記事 目次 次の記事
最近の更新
  1. Docker - macOS アプリケーションナビ Jul 8
  2. VMware Fusion - macOS アプリケーションナビ Jun 30
  3. Google Apps Script (GAS) で Slack アプリを作る Jun 14
  4. Alfred 4 - macOS アプリケーションナビ May 31
  5. 論文データベースの Mendeley への移行 - 産技高専における macOS 環境の構築(3) May 27
  6. 新規マシン導入前の下準備(続き) - 産技高専における macOS 環境の構築(2) May 24
  7. 新規マシン導入前の下準備 - 産技高専における macOS 環境の構築(1) May 23
  8. SourceTree による Git リポジトリの管理 - 産技高専における Windows 環境の構築(5) Apr 26
  9. Windows のパッケージマネージャーの設定(リベンジ) - 産技高専における Windows 環境の構築(4) Apr 25
  10. Windows のパッケージマネージャーの設定 - 産技高専における Windows 環境の構築(3) Apr 24
タグ一覧
  1. macOSAppNavi (3)
  2. docker (1)
  3. VMware (3)
  4. macOS (5)
  5. Slack (1)
  6. GAS (1)
  7. macOSSetting (3)
  8. mendeley (1)
  9. LaTeX (1)
  10. Homebrew (2)
  11. WindowsSetting (5)
  12. Windows (5)
  13. SourceTree (1)
  14. Bitbucket (1)
  15. Chocolatey (1)
  16. PackageManagement (1)
  17. Setup (2)
  18. Proxy (1)
  19. PythonLibrary (15)
  20. Python (15)
  21. NumPy (8)
  22. JupyterLab (1)
  23. RailsApp (38)
  24. Rails (37)
  25. RSpec (15)
  26. Capybara (4)
  27. iOS (1)
  28. milligram (1)
  29. Webpack (2)
  30. FactoryBot (4)
  31. devise (3)
  32. locale (1)
  33. Yard (1)
  34. Guard (1)
  35. Haml (4)
  36. PlantUML (1)
  37. Middleman (4)
  38. Ruby (4)
  39. YAML (1)
  40. 業績一覧 (24)
  41. 学術論文 (11)
  42. 国際会議論文 (13)
  43. 学会講演論文 (22)
  44. 著書 (2)
更新年
  1. 2019 (25)
  2. 2018 (46)
  3. 2017 (1)
  4. 2016 (1)
  5. 2015 (1)
  6. 2014 (1)
  7. 2013 (1)
  8. 2012 (1)
  9. 2011 (1)
  10. 2007 (1)
  11. 2006 (1)
  12. 2005 (1)
  13. 2004 (1)
  14. 2003 (1)
  15. 2002 (1)
  16. 2001 (1)
  17. 2000 (1)
  18. 1999 (1)
  19. 1998 (1)
  20. 1997 (1)
  21. 1996 (1)
  22. 1995 (1)
  23. 1994 (1)
  24. 1993 (1)
  25. 1992 (1)