🐟

[Rails] Webpacker gemとは

2021/10/09に公開

Rails

gem

webpacker

tech

Webpackerとは

Webpackerとはgemの名前で､｢Webpack｣を導入してくれるものです｡

かんたんに言うと､JavaScriptのビルドツール｢Webpack｣のラッパーのことで､Webpackを使用してRails上でJavaScript開発をするために必要な一連のまとまりを実装することができるgemです｡

また､WebpackerはRails6から標準装備されています｡

Webpackとは

そもそもWebpackとは、CSSやJavaScript、画像などのプログラムを作成する際の部品であるアセットを、１つのファイルとしてまとめてくれるものです｡似た仕組みとしてSprockets(アセットパイプライン)というものが存在します｡

※Sprocketsはアセットパイプラインを支える根幹のgem

Webpackerの特徴

WebpackのコマンドをRakeタスクでラップして提供
BabelによるES2015コードのコンパイル
React/Vue.js/Angularなどのサポート
Rails用ビューヘルパーの提供

WebpackerとSprockets

先程出てきましたが､Railsには標準で､Webpackの似た仕組みとして､Sprocketsというものが存在します｡どちらも(アセットパイプライン)です

両者の解決しようとしている領域は似ています｡

そのため､JSの管理をどちらで行うかを選択する必要があります｡ただ､Sprocketsは徐々に古い仕組みとなっているため､近年ではwebpackerを使用するのが主流となってきています｡

下記表は､両者の対応関係｡

タスク	Sprockets	Webpacker
JavaScriptをアタッチする	javascript_include_tag	javascript_pack_tag
CSSをアタッチする	stylesheet_link_tag	stylesheet_pack_tag
画像にリンクする	image_url	image_pack_tag
アセットにリンクする	asset_url	asset_pack_tag
スクリプトをrequireする	//= require	importまたはrequire

development環境でWebpackerを実行

Webpackerにはdevelopment環境で実行する下記の2つのbinstubファイルが同梱されています｡

./bin/webpack
./bin/webpack-dev-server

これらのbinstubファイルは標準の実行ファイルであるwebpack.jsとwebpack-dev-server.jsの薄いラッパーになっており、環境に応じて適切な設定ファイルや環境変数が読み込まれるようになっています。

development環境のWebpackerは、デフォルトでRailsページが読み込まれると必要に応じて自動的にコンパイルを行います。つまり別のプロセスの実行は不要であり、コンパイルエラーは標準のRailsログに出力されます。

これを変更するには、config/webpacker.ymlファイルをcompile: falseに変更します。bin/webpackを実行すると、packを強制的にコンパイルします。

コードのライブリロード機能を使いたい場合や、JavaScriptコードが多くてオンデマンドのコンパイルが遅くなる場合は、./bin/webpack-dev-serverを実行する必要があります。webpack-dev-serverのプロセスは、app/javascript/packs/*.jsファイルの変更を監視して変更時に自動的に再コンパイルし、ブラウザを再読み込みします。

/bin/webpackコマンド

JavaScriptやCSSなどをコンパイルするためのコマンド

例)

$ ./bin/webpack
Hash: 3830cdcdec9d79c60330
Version: webpack 4.41.5
Time: 3823ms
Built at: 2021-08-07 17:05:02
                                      Asset      Size        Chunks                         Chunk Names
     js/application-981d57ca76e124dd3932.js   4.4 KiB   application  [emitted] [immutable]  application
 js/application-981d57ca76e124dd3932.js.map  4.14 KiB   application  [emitted] [dev]        application
    js/edit_article-bbb653b98e63c72de324.js  1.75 MiB  edit_article  [emitted] [immutable]  edit_article
js/edit_article-bbb653b98e63c72de324.js.map  2.04 MiB  edit_article  [emitted] [dev]        edit_article
     js/hello_react-60a3a1c0039aa9665dd4.js  1.19 MiB   hello_react  [emitted] [immutable]  hello_react
 js/hello_react-60a3a1c0039aa9665dd4.js.map  1.37 MiB   hello_react  [emitted] [dev]        hello_react
                              manifest.json  1.02 KiB                [emitted]              
Entrypoint application = js/application-981d57ca76e124dd3932.js js/application-981d57ca76e124dd3932.js.map
Entrypoint edit_article = js/edit_article-bbb653b98e63c72de324.js js/edit_article-bbb653b98e63c72de324.js.map
Entrypoint hello_react = js/hello_react-60a3a1c0039aa9665dd4.js js/hello_react-60a3a1c0039aa9665dd4.js.map
[./app/javascript/articleBlockEditor/editor.js] 4.07 KiB {edit_article} [built]
[./app/javascript/articleBlockEditor/index.js] 957 bytes {edit_article} [built]
[./app/javascript/packs/application.js] 514 bytes {application} [built]
[./app/javascript/packs/edit_article.js] 33 bytes {edit_article} [built]
[./app/javascript/packs/hello_react.jsx] 1.17 KiB {hello_react} [built]
    + 16 hidden modules

bin/webpack-dev-server

ローカル環境の開発でjsやcssなどのコードを変更した時に､都度上記の/bin/webpackを実行しなくても､このサーバを起動したままにしておくと､変更を自動検知してブラウザに自動で反映してくれます｡

ただビルドしたものをすべてメモリに保存するので､重くなる可能性があります｡
rails sは別途起動する必要があります｡

bin/webpack-dev-server

rails s

JSを扱う

webpackerでjsを扱うには､app/javascript/packs/の下に､JavaScript pack（application.js）を置き､先程のコマンドでコンパイルする必要があります｡

$ ./bin/webpack

また､コンパイルしたJavaScript pack（application.js）をビューで使うには下記コマンドでインクルードする必要があります｡

javascript_pack_tag '<pack名>'

ちなみに､httpメソッドのdeleteが動かない場合はこのjsのプリコンパイルが上手くできていない可能性もあるので､一度$ ./bin/webpackを実行してみましょう｡