Webpackとは

最近、フロントエンドの規模が段々大きくなり、Javascriptのコード量が多くなって、コードのメンテナンスのためにモジュール化して管理する場合が多い。また、いろんなJSのフレームワークやNodeのライブラリを使うようになる。でもJSは基本的にこういうモジュール間のimport/includeをサポートしてくれないのでモジュールを管理するツールが必要になる。それのために出てきたものがモジュールバンドリングだ。モジュール間の依存性を理解し、それを元にうまく動ける静的アセットを作ることがモジュールバンドリングであり、それを実行するものがモジュールバンドラーだ。もちろんWebpackは唯一のモジュールバンドラーではない。既にRequireJS,Browserifyなどのモジュールバンドラーがあるけど、最近のフロントエンドにはWebpackが主流になっている。

RailsでのWebpack

Rails5.1ではWebpackを通してReact,Vue.js,Angular,Elmなどのフレームワークがサポートされ、さらに簡単に使えるようになった。webpackerを使えばプロジェクトにJSのフレームワークやライブラリを簡単に入れることができるし、Webpackのconfigを設定してBabelを使ってトランスパイルすることももちろんできる。

webpackerの使い方

インストール

Rails5.1には

1

$ rails new myapp --webpack

のように後ろに--webpackをつけてプロジェクト作成の時インストールするか普通にgemfileに入れてbundle installをしてから./bin/rails webpacker:installをすることでwebpackerを入れることができる。
Rails5.1でサポートするReact,Vue.js,Angular,Elmを指定したい時は

1
2
3
4

$ rails new myapp --webpack=react
$ rails new myapp --webpack=angular
$ rails new myapp --webpack=vue
$ rails new myapp --webpack=elm

のように指定する。

webpack-dev-server

通常のwebpackコマンドも--watchまたは-wオプションつきで実行することによりファイルの変更を検知して自動でリビルドを行うことが可能だが、webpack-dev-serverはそれに加えて、ブラウザも自動的にリロードしてくれる（Automatic Refresh）。
ブラウザ全体のリロードではなく、編集したモジュールのみを更新するHot Module Replacementという仕組みが使える。
といった機能を備えているため、ローカルで開発するにはwebpack-dev-serverを使う方が便利。
それに、rails serverも同時に動かしているならばforemanというgemを使ったら便利。webpackerのgithubページにもそれを書いてある。

1

$ gem install foreman

1
2
3

# Procfile
web: bundle exec rails s
webpacker: ./bin/webpack-dev-server

1

$ foreman start

ブラウザに表示

ビューに

1
2

<%= javascript_pack_tag 'app' %>
<%= stylesheet_pack_tag 'app' %>

のように入れて使う。

参考

WebPackを使ってRailsからJavaScriptを楽に良い感じに分離する
webpacker