とりあえずbabelとnpm package管理できればいいや、くらいのノリで
rails new
rails new はwebpack関連のオプションなしで実行。
--webpack や --webpack=*** で同時に行うこともできるが、
webpack関連でジェネレートされた差分がわからなくなるのでオプションなしがおすすめ。
yarnは最新にする
$ yarn --version
0.24.5
※ 2017年5月時点
アップデートは以下のコマンドで
yarn self-update
webpack init
webpackerを追記
gem 'webpacker', github: 'rails/webpacker'
webpackerのインストール
$ bundle install
$ bin/rails webpacker:install
必要なファイルがいろいろ生成される。
エントリポイントとなるapplication.jsをlayoutファイルに追記する。
views/layouts/application.html.erb
<%= javascript_pack_tag 'application' %>
※ webpackを通すエントリポイントを指定するときは、javascript_pack_tagというヘルパーを使う
bin/webpack を実行して Hello World from Webpacker
が表示されれば設定完了
webpackerのディレクトリ構成
webpackで管理するjsは、以下のディレクトリに配置する
※ app/assets/javascripts では無いことに注意！
app/javascripts/packs/
app/javascript/
├── lib → 共通で使う雑多なjsの置き場所
│
├── packs
│ └── application.js → エントリーポイント
└── pages
└── hoge
└── index.js → hogeページで動くjs
cssとimages
今回はwebpack利用は控えめな方針なので
cssとimageはそれぞれ従来通り
css → assets/stylesheets/
image → assets/images
に配置する
page.jsを使ったルーティングの例
webpackは関係ないが、エントリポイントを1つにする場合は、
page.jsを使ってルーティング
app/javascript/packs/application.js
import page from 'page';
import pageHoge from '../pages/hoge';
page('/hoge/index', pageHoge);
page();
webpack-dev-serverを設定してLive Reload
gem 'foreman'
web: bundle exec rails s
webpacker: ./bin/webpack-dev-server
以下のコマンドで
rails serverとwebpack-dev-serverが同時に起動する
$ foreman start -p 3000
以上。ここまでwebpackのconfigは1行も追記せずに、
webpackでコンパイルできる環境が完成している。