いつもお世話になっております。
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

【質問の主旨】

GitHubにUPしているコードを$ npm start もしくは $ npm run startで実行するとターミナルの画面で下記のエラーが出ます。

> @ start /Users/MYUSERNAME/Desktop/firebase/js_reciepe_v2_ch11
> web-pack-dev-server --open

sh: web-pack-dev-server: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! @ start: `web-pack-dev-server --open`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the @ start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/MYUSERNAME/.npm/_logs/2019-07-20T06_54_44_194Z-debug.log

このエラーを表示させずブラウザでlocalhost:8080にアクセスしたときコンソール画面に、

25
山田太郎です。

と表示させるためにはどうすれば良いでしょうか？

【質問の補足】

エラーが発生するまでに行った作業はおおむね以下の1から4の通りです。

1. webpack利用の準備

https://github.com/echizenyayota/js_reciepe_v2_ch11-/commit/43d7e0bbbe217bd5f8580a23f019785217cecf9e#diff-3ec03583f8eaec275cb2183db769ff47

2. webpack-dev-serverのインストール

$ npm install --save-dev webpack-dev-server

https://github.com/echizenyayota/js_reciepe_v2_ch11-/commit/b8f621b95087a8aacb0a32d5f6b897e7ca08ff08#diff-3ec03583f8eaec275cb2183db769ff47

3. webpack.config.jsの編集

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: `${__dirname}/dist`,
    filename: 'main.js'
  },
   // deveServerプロパティを追記
  devServer: {
    contentBase: './dist'
  }
};

https://github.com/echizenyayota/js_reciepe_v2_ch11-/blob/master/webpack.config.js

4. package.jsonファイルの作成と編集

https://github.com/echizenyayota/js_reciepe_v2_ch11-/blob/master/package.json

以上の作業のうち、4番目のpackage.jsonに問題がありそうな気がしますが、質問の引用元となったJavaScriptg逆引きレシピ第2版のP.526で紹介されている、「コードを変更したときに自動的にバンドルを実行したい」を見ても、どのように修正すれば良いのか分かりません。

以上、よろしくお願い申し上げます。