56805


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

* * *

## 【質問の主旨】

[GitHub](https://github.com/echizenyayota/js_reciepe_v2_ch11-)にUPしているコードを`$
npm start` もしくは `$ npm run start`で実行するとターミナルの画面で下記のエラーが出ます。

[code]

    > @ 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
    
[/code]

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

[code]

    25
    山田太郎です。
    
[/code]

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

## 【質問の補足】

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

### 1\. webpack利用の準備

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

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

[code]

    $ npm install --save-dev webpack-dev-server 
    
[/code]

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

### 3\. webpack.config.jsの編集

[code]

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

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

* * *

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


CC BY-SA 4.0
2019-07-22T03:08:51.580
56798
2019-09-07T17:11:09.537
2019-09-07T17:11:09.537
32986
32232
question
webpack
webpack-dev-serverをインストールしたもののローカル開発環境（localhost:8080）で作成したファイルを実行するとエラーが出ます。エラーを出さずにファイルの内容をブラウザで表示させるためにはどうすれば良いでしょうか？

[code]

    -  "start": "web-pack-dev-server --open",
    +  "start": "webpack-dev-server --open",
    
[/code]

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


CC BY-SA 4.0
2019-07-22T04:17:21.037
56801
2019-07-22T04:17:21.037
15114
56798
answer


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

* * *

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

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

[code]

    <!DOCTYPE html>
    <meta charset="utf-8">
    <title>タイトル</title>
    <script src="./main.js"></script>
    
[/code]


CC BY-SA 4.0
2019-07-22T05:54:36.893
56805
2019-07-22T08:52:27.643
2019-07-22T08:52:27.643
32986
32986
56798
answer