いつもお世話になっております。 下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。 --- ## 【質問の主旨】 [GitHub](https://github.com/echizenyayota/js_reciepe_v2_ch11-)に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版](https://www.shoeisha.co.jp/book/detail/9784798157573)のP.526で紹介されている、「コードを変更したときに自動的にバンドルを実行したい」を見ても、どのように修正すれば良いのか分かりません。 --- 以上、よろしくお願い申し上げます。