自分用メモ。以下について書いています。
- webpacker導入
- React・Sassの導入・設定
- エントリーファイルの変更
- rails serverとwebpackの起動
##webpacker導入
###インストール
Gemfileに以下を記述し、インストール
gem 'webpacker', github: "rails/webpacker"
$ bundle install
Rakeタスクでwebpackerを確認。
$ bin/rake -T | grep webpacker
Running via Spring preloader in process 1179
rake webpacker # Lists all available tasks in Webpacker
rake webpacker:check_binstubs # Verifies that webpack & webpack-dev-server are present
rake webpacker:check_node # Verifies if Node.js is installed
rake webpacker:check_yarn # Verifies if Yarn is installed
rake webpacker:clobber # Remove the webpack compiled output directory
rake webpacker:compile # Compile JavaScript packs using webpack for production with digests
rake webpacker:install # Install Webpacker in this application
rake webpacker:install:angular # Install everything needed for Angular
rake webpacker:install:elm # Install everything needed for Elm
rake webpacker:install:react # Install everything needed for React
rake webpacker:install:vue # Install everything needed for Vue
rake webpacker:verify_install # Verifies if Webpacker is installed
rake webpacker:yarn_install[arg1,arg2] # Support for older Rails versions
webpackerをインストール。
$ rails webpacker:install
上記コマンド後、以下ディレクトリ・ファイルが追加される。
- app/
- javascript/
- packs/
- application.js
- packs/
- javascript/
- config/
- webpacker.yml
- webpack/
- development.js
- environment.js
- production.js
- test.js
- node_modules/
- postcssrc.yml
- babelrc
- yarn.lock
- package.json
ReactとSassの導入・設定
React
導入
以下コマンドでReactをインストール
$ rails webpacker:install:react
app/javascript/packs/hello_react.jsxファイルが生成される（サンプルファイル）
設定
javascript_include_tagをjavascript_pack_tagに変更
<!DOCTYPE html>
<html>
<head>
<title>SampleWebpack</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
app/javascript/packs/application.jsにhello_reactファイルをimport
/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb
console.log('Hello World from Webpacker')
import './hello_react'
Sass
導入
app/javascript/に、stylesheets/application.scssを作成。
body {
color: red;
}
設定
stylesheet_link_tag をstylesheet_pack_tag に変更
<!DOCTYPE html>
<html>
<head>
<title>SampleWebpack</title>
<%= csrf_meta_tags %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
エントリーファイルにSassファイルをimport
/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb
console.log('Hello World from Webpacker')
import './hello_react'
import '../stylesheets/application'
確認
適当にcontrollerを作成
$ rails g controller static index
webpackとrails serverを起動（後で一つのコマンドで実行できるように設定）
$ rails s
$ bin/webpack-dev-server
"hello_react.js"の内容とSassの指定が反映されていればOK
##エントリーファイルの変更
Sassをjavascriptディレクトリ内に配置するのが気持ち悪く、エントリーポイントを変えたい。（初期設定はapp/javascript/packsがエントリー）
webpacker.ymlを変更
default: &default
source_path: app/javascript
source_entry_path: packs
public_output_path: packs
↓↓↓↓ 以下に変更
default: &default
source_path: app/client
source_entry_path: entry
public_output_path: packs
webpacker.ymlの変更に合わせ、app/javascript/の構成も以下のように変更
- app/
- client/
- entry/
- application.js
- javascript/
- hello_react
- stylesheets/
- application.scss
- entry/
- client/
rails serverを再起動し、"Hello World from Webpacker"や"Hello React"と表示されればOKです。
rails serverとwebpackの起動
現状だとrails serverとwebpack dev serverを別々に実行しているためめんどくさい。
foremanを追加
group :development do
gem 'foreman'
end
bundle install
ルートディレクトリにProcfileを作成。
foremanでサーバーを立ち上げると、ボート番号は5000となるため、railsコマンドで3000を指定。
rails: rails s -p 3000
webpacker: ./bin/webpack-dev-server
foreman実行
$ foreman start
※package.jsonにscriptを記述し、yarn startでも良いと思ったが、rails serverがうまく停止できなかったので見送り。
最後に
間違っている箇所などあれば、コメントいただけると幸いです。