Webpacker3から5にアップグレードする方法 | Rails

最近、開発端末をMacBook Pro M1 Maxに乗り換えたところ、webpackのコンパイルが極端に遅くなりました。思えばwebpack3のままメンテナンスを怠っていたので、これを機にwebpack4にアップグレードすることになりました。

Webpackerをv3からv5にアップグレードする

現状のwebpacker、webpackのバージョンは以下のとおりです。

webpacker (3.5.5) → webpacker (5.4.3)
webpack(3.12.0) → webpack(4.46.0)

これをwebpack4に対応しているバージョンまで上げたいと思います。

Gemfile

bundle update webpacker

Gemfile.lock

webpacker (3.5.5) → webpacker (5.4.3)

アップデートが完了したらwebpackerを再インストールします。

bundle exec rails webpacker:install

ファイル単位で上書きするかどうか聞かれます。一旦全て上書きしてから後ほど必要な箇所だけ変更すると良いでしょう。

私の環境ではreactを使用していますので、以下も実行します

bundle exec rails webpacker:install:react

インストールすると以下のように設定ファイルが置き換わります。

.babelrc
.postcssrc.yml

上記ファイルは新しくbabel.config.jsとpostcss.config.jsに置き換える必要があるので削除しましょう。

babel.config.jsとpostcss.config.jsの設定内容はほとんどの場合、デフォルトのままで問題ないと思います。

babelの各種設定内容を理解したい方は、以下の記事が参考になりますので一読しておくと良いでしょう。

基本的なアップグレードはこれで完了です。Webpackerを使用していると簡単にwebpack周りをアップグレードすることができます。

残りはプロジェクトごとの個別考慮をして、動作確認をすれば終了です。

私の場合、プロジェクトで使用しているNPMライブラリの依存関係でエラーやワーニングが発生したので、それぞれ適切なバージョンにアップグレードしました。

無事アップグレードが完了し、m1 mac環境でのwebpackビルドも元通り高速になりました。