LoginSignup
53
56

More than 5 years have passed since last update.

@tatsuyankmura(tatsuya nkmura)

webpackerの導入・設定メモ

Posted at

自分用メモ。以下について書いています。

  • webpacker導入
  • React・Sassの導入・設定
  • エントリーファイルの変更
  • rails serverとwebpackの起動

webpacker導入

インストール

Gemfileに以下を記述し、インストール

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
  • 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に変更

application.html.erb
<!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

app/javascript/packs/application.js
/* 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を作成。

app/javascript/stylesheets/application.css
body {
 color: red;
}

設定

stylesheet_link_tagをstylesheet_pack_tagに変更

application.html.erb
<!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

app/javascript/packs/application.js

/* 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

スクリーンショット 2017-11-26 11.30.38.png

エントリーファイルの変更

Sassをjavascriptディレクトリ内に配置するのが気持ち悪く、エントリーポイントを変えたい。（初期設定はapp/javascript/packsがエントリー）

webpacker.ymlを変更

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

rails serverを再起動し、"Hello World from Webpacker"や"Hello React"と表示されればOKです。

rails serverとwebpackの起動

現状だとrails serverとwebpack dev serverを別々に実行しているためめんどくさい。

foremanを追加

Gemfile
group :development do
  gem 'foreman'
end

bundle install

ルートディレクトリにProcfileを作成。
foremanでサーバーを立ち上げると、ボート番号は5000となるため、railsコマンドで3000を指定。

Procfile
rails: rails s -p 3000
webpacker: ./bin/webpack-dev-server

foreman実行

$ foreman start

※package.jsonにscriptを記述し、yarn startでも良いと思ったが、rails serverがうまく停止できなかったので見送り。

最後に

間違っている箇所などあれば、コメントいただけると幸いです。

53
56
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
53
56