Webpacker
参考：
rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails – GitHub
ドキュメント
参考：
webpacker/docs at master · rails/webpacker – GitHub
Documentation for webpacker | RubyDoc.info
Webpacker 公式 README — Webpack v4 対応版 翻訳 | TechRacho
保存版 Rails 5 Webpacker 公式ドキュメントの歩き方 + 追加情報 | TechRacho
導入
参考：
Webpacker についてちゃんと調べてみた | UUUM 攻殻機動隊 エンジニアブログ
Webpacker への移行を機にフロントエンド開発を改善 | メドピア開発者ブログ
Webpacker 3 ではじめる Rails エンジニアのためのモダンフロントエンド入門 〜Sprockets を使わない Rails プロジェクト試案〜 | blog.tai2.net
Webpacker is installed | Misoca 開発者ブログ
Rails & Webpacker でフロントエンド開発環境を整える – Qiita
Rails アプリのアセットを Webpacker で管理する | もばらぶエンジニアブログ
Rails アプリに Webpacker を導入する | Hachy
Rails で Webpacker を導入して CoffeeScript から ES2015 (ES6) に移行しました | Rista Tech Blog
Webpacker + React を導入する手順まとめ | vdeep
Asset Pipeline から Webpack へ 翻訳 | TechRacho
コンポーネントベースでアプリを書く 翻訳 | TechRacho
Webpack の詳細、ActionCable の実装と Heroku へのデプロイ 翻訳 | TechRacho
プロジェクトの設定
Webpacker を有効にして新しいプロジェクトを作成する。(Rails 5.1 以降で利用可能)
$ rails new web_app --webpack
Webpacker を既存のプロジェクトに導入する。
$ rails webpacker:install
参考：
環境構築時に `require’: cannot load such file — bootsnap/setup (LoadError) | なんや書くところ
Installation – rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails – GitHub
Rails 5.1
参考：
Rails 5.1 で控えめに webpacker を使ってフロントエンド環境構築 – Qiita
Rails 5.1.3 + Webpacker 3.1 で sass と js の管理を Sprockets から Webpacker に移行する – Qiita
Rails 5.1.3 で sass と js の管理を Sprockets から Webpacker に移行した – Qiita
Rails 5.1 のアプリケーション開発環境を準備してみる | 株式会社テクノブレーン
概要
参考：
Webpacker 使うなら最低限これだけは知っておいてほしいこと – Qiita
Webpacker を使った Rails での JavaScript 開発 | クックパッド開発者ブログ
Rails 5.1 から導入される webpacker.gem は本当に Rails のフロントエンド開発に福音をもたらすのか? – Qiita
app/javascript ディレクトリ
参考：
webpacker/folder-structure.md at v3.5.5 · rails/webpacker – GitHub
ディレクトリ構成のカスタマイズ
参考：
Webpacker のディレクトリ構成を Rails から切り離す形に変える方法 – Qiita
Rails Engine で Webpacker を使う
参考：
dakarai/assets_management_tasks.rake at master · ideonetwork/dakarai – GitHub
How to use this gem from within rails engines? · Issue #348 · rails/webpacker – GitHub
Include files coming from engines · Issue #21 · rails/webpacker – GitHub
Turbolinks
参考：
Rails での部分的な javascript_pack_tag と turbolinks の共存 | Write Code or Die
bin/webpack コマンド
rails assets:precompile から Webpack でバンドルを実行する際に呼び出されるコマンド
インスペクタを接続してデバッグを行う。(node コマンドに --inspect-brk を付けて起動することに相当する。)
$ bin/webpack --debug
参考：
Debugging your webpack config – webpacker/troubleshooting.md at v4.0.7 · rails/webpacker – GitHub
javascript_pack_tag
バンドルされたコードを読み込む。
参考：
javascript_pack_tag – webpacker/helper.rb at v4.0.7 · rails/webpacker – GitHub
stylesheet_pack_tag
extract_css: true の場合にスタイルシートを読み込む。
参考：
stylesheet_pack_tag – webpacker/helper.rb at v4.0.7 · rails/webpacker – GitHub
ビューからフロントエンドに動的な値を渡す
参考：
rails の webpacker の packs 内の js に rails の値を展開したい – teratail
compile
参考：
compile – webpacker/compiler.rb at v4.0.7 · rails/webpacker – GitHub
run_webpack – webpacker/compiler.rb at v4.0.7 · rails/webpacker – GitHub
watched_files_digest
参考：
watched_files_digest – webpacker/compiler.rb at v4.0.7 · rails/webpacker – GitHub
record_compilation_digest – webpacker/compiler.rb at v4.0.7 · rails/webpacker – GitHub
コンパイル時間
参考：
Asset compile hangs on [Webpacker] Compiling assets · Issue #1217 · rails/webpacker – GitHub
max_old_space_size
export NODE_OPTIONS="--max-old-space-size=2048"
参考：
Webpacker のプロダクション環境での assets:precompile でこける | みかづきメモ
Rails5.1 の bin/webpacker-dev-server で JavaScript heap out of memory が起きた時の対処方 – Qiita
webpack の build で out of memory が出たら NODE_OPTIONS で使用メモリサイズを指定すれば OK | 趣味グラマの覚え書き
rails5.1 のプリコンパイルが終わらない (webpack がらみ) – teratail
How to run node with flag --max_old_space_size · Issue #1189 · rails/webpacker – GitHub
テスト環境の設定
参考：
webpacker/testing.md at master · rails/webpacker – GitHub
React
参考：
webpack を使った Rails 上での React 開発 | クックパッド開発者ブログ
WebpackRunner
webpack を実行するランナー
参考：
webpacker/webpack_runner.rb at v4.0.7 · rails/webpacker – GitHub
DevServerRunner
webpack-dev-server を実行するランナー
参考：
webpacker/dev_server_runner.rb at v4.0.7 · rails/webpacker – GitHub
Runner
ランナーの基本クラス
参考：