いつもお世話になっております。
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。
【質問の主旨】
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利用の準備
2. webpack-dev-serverのインストール
$ npm install --save-dev webpack-dev-server
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で紹介されている、「コードを変更したときに自動的にバンドルを実行したい」を見ても、どのように修正すれば良いのか分かりません。
以上、よろしくお願い申し上げます。