1

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


【質問の主旨】

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で紹介されている、「コードを変更したときに自動的にバンドルを実行したい」を見ても、どのように修正すれば良いのか分かりません。


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

2 件の回答 2

3

まず、 package.json に書かれているスクリプトについてですが、実行したいパッケージは web-pack-dev-server ではなく、webpack-dev-server なので[1]、ここを修正します。


次に、特にプラグインを使用しない状態で webpack を実行しただけでは、バンドルされた JavaScript ファイルが生成されるだけで、 HTML ファイルが自動的に作成されたり、 HTML ファイルにバンドルされた JavaScript ファイルが自動挿入されることはありません[2] (実際には serve-index によりファイルの一覧が表示されます[3]が、これはバンドルファイルを読み込みません)。

そのため、今回の場合、 dist ディレクトリに index.html を作成しておく必要があります。

<!DOCTYPE html>
<meta charset="utf-8">
<title>タイトル</title>
<script src="./main.js"></script>
1
  • supa さま。コメントありがとうございます。"start": "webpack-dev-server --open", に修正した上でnpm start を実行するとlocalhost:8080のアドレスでブラウザが起動しました。また dist ディレクトリの下に、index.htmlを作成することで、index.jsで記述した、console.log(getTriangle(5, 10));let p = new Person('山田太郎'); console.log(p.show()); の内容がブラウザのコンソール画面上で表示されることになりました。今後ともどうぞよろしくお願いします。 Commented 2019年7月22日 8:04
2
-  "start": "web-pack-dev-server --open",
+  "start": "webpack-dev-server --open",

不要な - が原因な気がしました(^ ^)

1
  • 奥村健吾 さま。コメントありがとうございます。ご指摘のとおり"start": "webpack-dev-server --open", に修正した上でnpm start を実行すると、 > @ start /Users/MYUSERNAME/Desktop/js_reciepe_v2_ch11 > webpack-dev-server --open ... Compiled successfully. でという結果が返され、localhost:8080/でブラウザが立ち上がりました。今後ともどうぞよろしくお願いします。 Commented 2019年7月22日 7:59

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。