Zenn
📖

Webpackerを3系から5系までアップデートした時のメモ

2022/08/08に公開
Rails
webpacker
tech

はじめに

Webpackerのバージョンをあげる機会があって、意外と困ったことがあったのでその時の備忘録。

アップデート手順

以下の手順で進めていきます。

  1. CHANGELOGをざっと見る
  2. Webpacker3から4にあげる
  3. bin/webpack-dev-serverやrailsサーバーのコンソールでエラーが出ていないことを確認する
  4. Webpacker4から5にあげる
  5. bin/webpack-dev-serverやrailsサーバーのコンソールでエラーが出ていないことを確認する

CHANGELOGを確認する

まずはCHANGELOGを確認して、Breaking changeがないか確認します。
また、バージョン3から4にあげる際はWebpacker Upgrade Guideも確認しましょう。

Webpacker3から4にあげる

gemfileでバージョンを固定して一気に5系に上がらないようにします。

Gemfile
gem 'webpacker', '~> 4'

bundle updateを実行すします。

$ bundle update webpacker

次にwebpackerを再インストールします。
設定ファイルを上書きするか聞かれるので、とりあえずYで上書きしていきます。

$ rails webpacker:install
warning package.json: No license field
warning No license field
    conflict  config/webpacker.yml
Overwrite /Users/yappu/dev/fss-media/config/webpacker.yml? (enter "h" for help) [Ynaqdhm] Y
       force  config/webpacker.yml

再インストールが終わったら上書きされたファイルを確認して、必要な設定が戻しておく必要があるのでdiffを確認して見てください。

プロジェクトによって異なると思いますが、今回はReactを使っていたので以下のコマンドも実行します。

$ rails webpacker:install:react

3から4へのアップデートでは設定ファイルを置き換える必要があるので注意してください。
置き換えが終わったら.babelrcと.postcssrc.ymlは削除して大丈夫です。
この辺はWebpacker Upgrade Guideを読んでみてください。

.babelrc　→ babel.config.js
.postcssrc.yml → postcss.config.js

これでアップデート作業は完了です。

bin/webpack-dev-serverやrailsサーバーのコンソールでエラーが出ていないことを確認する

bin/webpack-dev-serverを実行するとエラーになりました。

$ bin/webpack-dev-server
/rails_app/node_modules/webpack-cli/bin/utils/prompt-command.js:46
    return func(...args);
           ^
TypeError: Class constructor ServeCommand cannot be invoked without 'new'

これはwebpack-dev-serverのバージョンが新しすぎて起きているエラーみたいなので（参考）、バージョンダウンして対応します。
@webpack-cli/serveも必要ないので削除します。

package.json
"@webpack-cli/serve": "^1.7.0", # 削除
"webpack-dev-server": "^4.9.3" # 削除
"webpack-dev-server": "^3" # 追加

これでエラーが出なくなりました。

$ bin/webpack-dev-server
...
Compiled successfully.

Webpacker4から5にあげる

上と同じことをもう一度繰り返せばOKです。
特にエラーが出ることなくアップデートできました。

Discussion