rails3.1からrails5.2までは、Sprocketsで行っていたが、
rails6からWebpackerが標準に。
webpackerについてまとめ増田。
Webpackerとは
webpackのラッパー。
webpackは、jsなどの様々な形式のファイルをまとめるモジュールパンドラー。
webpackは、複数のjsモジュールを1つのファイルにまとめたりすることができる。
まとめる段階で、jsのコンパイルや圧縮などの様々な処理を実行可能。
Webpackerの使い方
app/javascript/packs/配下に、最終的にモジュールをバンドルしてまとめられるファイルを置き、それ以外ディレクトリにモジュールを置く。
rails newを行うと、app/javascript/packs/application.jsが生成されて、デフォルトに入っているjsライブラリは読み込まれている。
Webpackerが用意している設定方法
rails newで以下のファイルが自動的に生成される。
- config/webpacker.yml
- config/webpack/*.js
これらのファイルで、色々と設定して行く。
細かい設定方法：Webpacker
デフォルトでいくつかのloaderやpluginを利用する設定になっている。
Webpackerが提供指定ないloaderやpluginを追加したい場合や、config/webpacker.ymlで設定できる範囲外のことをしたい場合はconfig/webpack/.jsを修正する。
config/webpack/.jsは最終的なwebpackの設定を出力。
SprocketsからWebpackerへ
WebpackerはSprockets時代の開発の進め方その７でWebpack環境が使えるようになっている。
rails assets:precompileを実行の時に、webpackもコンパイルも実行される。
Webpackerの自動コンパイル
webpack環境で書いたjsは、編集ごとにコンパイルが必要。
コンパイルするには、./bin/webpackコマンドを実行。
実行するとデフォルトではpublic/packsディレクトリ配下に結果が出力される。
手動でコンパイルするのは面倒なので、必要なタイミングで自動コンパイルしてくれる。
= javascript_pack_tagメソッド実行時に対象になるファイルの更新有無をチェックし、更新されていれば./bin/webpackコマンドを通じてコンパイルを実行するという手順を踏んでいる。
コンパイル対象が多く、ページの表示に時間がかかりすぎる場合
=> webpack-dev-serverを利用すると便利
webpack-dev-serverは、webpackを利用して開発している時に便利に使えるサーバ。
webpack-dev-serverを起動していると、管理下のファイルの更新を検知し、すぐにコンパイルを実行する。
ライブラリの統合
Webpackerは、ReactやVueなど、いくつかのライブラリをすぐに導入するためのコマンドを提供。
コマンド実行の時に、パッケージや設定が入った状態になる。
新しいアプリケーションに追加
% rails new your_app_name --webpack=react
既存のアプリケーションに追加
% ./bin/rails webpacker:install:react
WebPackerの提供する設定の拡張
開発が進んでいくと、pluginやloaderを追加したくなるが、webpack.config.jsを持たないため、独自のやり方が必要。