npm run startでエラーが出たときの対処法

今回は、npm run startでエラーが出たときの対処法について書きます。
*npm = Node Package Manager

npm run start

上記コマンドを入力すると、このようなエラーが出ました。

sh: webpack-cli: command not found

webpack-cliが上手く機能していないと思い、グローバルにインストールし直すため次のコマンドを実行しました。

npm install -g webpack
npm install -g webpack-cli

ちなみに、「（-g）又は（--global）」をつけないとコマンドを実行した場所に「node_modules」というフォルダができ、その中（ローカル領域）にパッケージがインストールされます。

そのため、頻繁に使うパッケージなどはローカル領域に度々インストールするのではなく、グローバル領域にインストールした方が良い場合があります。

先ほどのコマンドを実行してから、node_modulesでエラーが出ました。

You need to install 'webpack-dev-server' for running 'webpack serve'.
Error: Cannot find module 'webpack-dev-server'

参考にした記事では、以下のコマンドでnode_modulesを削除していました。

rm -r node_modules

それから、

npm i

(i = installの略)

そして、再度 [npm run install] するとまたまたまたエラーが出ました。

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'contentBase'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

Invalid options object. Dev Serverとエラー文に書かれていることから、webpack.config.jsのdevserverの記述がおかしいと思い調べると、、、

webpack-dev-serverのオプションからcontentBaseがなくなっており、元の記述のcontentBaseからstaticに変更して再度　 [npm run install]　を実行すると解決しました。

v３からv４の間で変更がありcontentBaseがお亡くなりになられておりました。

めでたし、めでたし、、、