Webpackerを初めて触ってみた

2019年10月4日

以前にRailsチュートリアルを少しかじった程度でしたが、直近でRailsの開発案件に入りそうだったので、Railsのフロントエンドで利用されているWebpackerを触ってみました。webpackは業務で触った経験があるのですが、Webpackerは初めてです。

スポンサーリンク

Webpackerって?

webpackをRuby on Railsで扱うための、gemパッケージとなります。
Rails 5.1からサポートされているようです。

github:https://github.com/rails/webpacker

メリットって何?

・専属のフロントエンドエンジニアがいなくて、webpackに詳しくなくても、導入することができる。
・yarnによりバージョン管理可能になる。
・Browserifyに比べてビルド時間が短くなる。

デメリットって何?

・webpackに詳しいフロントエンジニアがいる場合、素直にwebpackを使った方がよさそう。エンジニア人員がバックエンドに寄っている場合は除く。
・webpacker用の設定を多少なり把握する必要がある。

開発の人員リソースやプロジェクト規模感によって使う使わないの判断をする形になりそう。

前提条件

利用にあたっては、以下の環境が必要となります。

・Ruby 2.2+
・Rails 4.2+
・Node.js 8.16.0+
・Yarn 1.x+

webpackerを導入してみる

実際にコマンドベースでrailsのプロジェクトとwebpakcerを追加してみます。

$ mkdrir rails_works
$ cd rails_works
$ bundle init
$ vim Gemfile
gem "rails" ←コメントアウト外します
gem 'webpacker', '~> 4.x' ←webpacker追加

# プロジェクトにgemが格納されるようにする。
$ bundle install --path vendor/bundle
...しばし待つ
# railsプロジェクト作成(dbはなんでも良いのですが、mysqlに一旦)
$ bundle exec rails new . -B -d mysql --skip-turbolinks --skip-test
...しばし待つ
$ bundle exec rails webpacker:install
Webpacker successfully installed ←成功メッセージが出たら完了
ここまでで初期設定完了!!

後で気付いたのですが、rails new する際に–webpackオプションでもいけるみたいでした。

設定ファイル関連

作成されたファイル見てみましょう!

app/javascript/packs/application.js
…エントリーポイントのファイル
config/webpacker.yml
…エントリーポイント/アウトプット/公開フォルダ等のパスなどが設定されている。
development/tests/production等の各環境の設定。

エントリーポイントやアウトプット環境既存の設定を自前で変更したい際は、webpacker.ymlを修正する。

staging環境はデフォルトではないので、運用するフェーズではstaging環境を追加することになりそう。

時間あるときに設定を自前でやってみようと思います。

実行してみる

プロジェクトのディレクトにて、以下を実行する。

view側にビルドしたjsが読み込める設定が入っているか確認。

<プロジェクトフォルダ名>/app/views/layouts/application.html.erb
<%= javascript_pack_tag ‘application’ %> ←こちら(なければ追加)

# サンプルでjsにalert仕込んでみる
$ vim app/javascript/packs/application.js
alert('fugafuga'); // 追記

# 新しいページ作成
$ rails g controller pages top

# サーバー起動
$ rails s
$ bin/webpack-dev-server
.....
ℹ 「wdm」: Compiled successfully.

最後にアクセスしてみましょう!
http://localhost:3000/pages/top

ちゃんとアラートが出ました。
ページも表示!

設定を変えていなければ、アウトプットは以下に出力されました。

<プロジェクトフォルダ名>/public/packs/js/application-XXXXXXXXX.js
※config/webpacker.ymlの方に出力先が設定されています。

まとめ

ひとまず今回入れてみるところまでを試してみましたが、特に苦労することもなく導入はできました。

ただ、entryやoutputなどを検討したりは必要なのと、手の込んだことをプロジェクト的にやらないといけないとなると結局調べるのに時間はかかるのかなという気がしました。

人員や知見もある人がいて、サービス(プロジェクト)もある程度規模が大きいのであれば、素直にwebpackを使う方がいいのかなぁーと思いました。


スポンサーリンク
PAGE TOP