Railsでwebpack-dev-serverが起動できないエラー

はじめに

デイトラWeb開発コースを進めている中でwebpack-dev-serverが実行できず、めちゃくちゃ解決に時間をかけてしまったため、原因と解決策を残しておきます。
時間はたくさん使ってしまいましたが、一方で理解が深まった面もあるので、その点も最後にアウトプットします。

問題

Railsのプロジェクトでbin/webpack-dev-serverを実行すると、Command "webpack-dev-server" not found.のエラーが出る

原因

node.js,rails/webpacker,webpack,webpack-dev-server,webpack-sliの互換性がない

解決策

package.jsonに以下を記載

  "engines": {
    "node": "14.16"
  },
  "devDependencies": {
    "webpack": "4.x.x",
    "webpack-cli": "3.x.x",
    "webpack-dev-middleware": "3.x.x",
    "webpack-dev-server": "3.x.x"
  }

念の為、webpackerとyarn.lockをアンインストール

rm yarn.lock
yarn remove @rails/webpacker

念の為、下記のファイルも手動で削除
config/webpacker.yml
bin/webpack
bin/webpack-dev-server

下記の再インストール

yarn install
bundle exec rails webpacker:install

下記のコマンドでサーバーが立ち上がるようになる

bin/webpack-dev-server

デバッグの過程で学んだこと

webpack / webpacker　とは？

webpackとは、復数のjavascript（とかCSSでとか）ファイルを1つにまとめてブラウザが読み込める形にするもの。webpackは設定用のファイルの記載なども必要で準備が結構面倒…
webpackerは、Railsが準備しているもので設定がもっと簡単（というか本当なら特に設定不要で使えるはず）

※ちなみに今回のデバッグの中で方向性を誤り、webpackerではなくwebpackを直接起動してserverを立ち上げる設定をしてしまいました。設定ファイルの記載内容でもエラーが出やすかったり、バージョンによって記載できる内容が変わるなど、たしかに結構面倒でした。。。

webpackerはその機能をwebpackに依存しているため、webpackやそれに関連するファイル（webpack-dev-serverやwebpack-cliなど）もインストールする必要がある。
webpack関連のファイルはすべてNode.jsにも依存しているため、Node.jsのバージョンとの互換性にも気を遣わないとエラー解決が難しくなる。

package.json　とは？

Railsのgemfileのようなもの。バージョンを指定してライブラリ？モジュール？をインストールできる。bundle installと同じようにyarn installでインストールを実行可能。

なぜ互換性のエラーが起きがちなのか

package.jsonに記載していないライブラリも、記載したライブラリが依存しているものならyarn installでインストールしてしまうため。package.jsonに記載する場合はバージョンを指定するが、勝手にインストールされるものはバージョンを指定しないので、勝手に最新版がインストールされることで互換性の問題が発生する原因になりうる。