Webpacker を使った開発 (webpack-dev-server) [Rails]

webpack-dev-server

参考：

webpacker/webpack-dev-server.md at 3-x-stable · rails/webpacker – GitHub

導入

参考：

Rails 5.1 で CSS を webpack-dev-server によって HMR (ライブリロード) させる – Qiita

開発サーバーを起動する

参考：

webpack v5 npx webpack-dev-server で dev server が動かないにハマる | かもメモ

pretty

true に設定すると、webpacker-dev-server においてコンパイルの進捗を表示する。(webpacker.yml 内で設定)

pretty: true

webpack-dev-server --progress --color で起動するのと同じになる。

参考：

Customizing Logging – webpacker/webpack-dev-server.md at 3-x-stable · rails/webpacker – GitHub

extract_css?

true の場合は Webpack でスタイルシートをバンドルする際に CSS ファイルとして抽出される。(webpacker.yml 内で設定)

参考：

extract_css? – webpacker/configuration.rb at v4.0.7 · rails/webpacker – GitHub

dev_server

Webpacker::DevServer のインスタンスを返す。

参考：

dev_server – webpacker/instance.rb at v4.0.7 · rails/webpacker – GitHub

dev_server.running?

webpack-dev-server が起動されている場合に true を返す。

参考：

running? – webpacker/dev_server.rb at v4.0.7 · rails/webpacker – GitHub

devtool

ソースマップの設定

development 環境のデフォルト設定

devtool: 'cheap-module-source-map'

production 環境のデフォルト設定

devtool: 'source-map'

参考：

devtool – webpacker/development.js at v4.0.7 · rails/webpacker – GitHub

devtool – webpacker/production.js at v4.0.7 · rails/webpacker – GitHub

Devtool | Webpack [Official]

デバッグ

インスペクタを接続してデバッグを行う。(node コマンドに --inspect-brk を付けて起動することに相当する。)

$ bin/webpack-dev-server --debug

参考：

Debugging your webpack config – webpacker/troubleshooting.md at v4.0.7 · rails/webpacker – GitHub

Webpacker::DevServer

参考：

webpacker/dev_server.rb at v4.0.7 · rails/webpacker – GitHub

Webpacker::DevServerRunner

参考：

webpacker/dev_server_runner.rb at v4.0.7 · rails/webpacker – GitHub