webpackでtsc -wみたいな物を使いたい（webpack-dev-server）

現状、bundle.jsを作成するときは以下のコマンドを毎回実行しています。

`npm run build`

これって正直面倒ですよね、、、

tcsコマンドのウォッチモードのように自動でbuildしてくれたら楽なのになって思います。

そんな時に使えるのが**webpack-dev-server**です

tsファイルを編集して保存した瞬間にbunsle.jsに反映しブラウザをリロードしてくれるという優れものです。

<h2>1.webpack-dev-serverをインストールする

以下のコマンドを実行する。
`npm install --save-dev webpack-dev-server`

<h2>2.設定ファイルに記述

package.jsonのscriptタグの中に以下を記述します。

```ruby:package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server"   //これを追加
  },
```

<h2>3.コマンド実行し起動

1.以下のコマンドを実行。
`npm run start`

2.以下のように表示される
`ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/nakashun1129/projects/dailyfoodscore
ℹ ｢wdm｣: Hash: 5c430d94a051915bf398
Version: webpack 4.43.0
Time: 3258ms
Built at: 2020/07/07 16:17:04`


[localhost:8080](http://localhost:8080/)にアクセスするとアプリケーションのページが表示されるようになる。


<h3>------ここから少しややこしくなります------

実はwebpack-dev-serverは起動時にbundle.jsを作成しています。

しかし、ローカルのディレクトリに作られるわけではありません。

ん？どういうこと？って感じですよね。

なるべくわかりやすく説明します。

現状のファイル構造はこうなっています。
<img width="614" alt="スクリーンショット 2020-07-07 16.38.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472442/b7f5d8ab-e2d0-bfd1-9d6b-863a2c40be5b.png">

distフォルダの中にbundleされたjsファイルがあります。

これを一度消した上で再度webpack-dev-serverを起動させてみます。
<img width="614" alt="スクリーンショット 2020-07-07 16.42.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472442/581f6676-783e-4454-bfbc-c479304fe84d.png">

あれ、作られませんね。。。

bundle.jsは作りますが、ファイルは作らないんです。

ん？どういうこと？となりますよね。

webpackが内部的にもっているんです。

その内部的にもっているbundle.jsにアクセスする方法があります。

URLに ' /budle.js ' を追加するとアクセスできます。
<img width="817" alt="スクリーンショット 2020-07-07 16.53.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472442/3356a05b-1af9-1009-b132-30b3e106caf1.png">

これで、bundle.jsが作られていることがわかりますね。

しかし、localhost:8080にアクセスしてもjsファイルが読み込まれていません。

その理由は、HTMLファイル上での呼び出しもとが違うからです。

```ruby:index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="dist/bundle.js" defer></script>
</head>
```
かといって、毎回書き換えるのも面倒ですよね。。

**webpackはこれも解決してくれます。**

設定ファイルのoutputに以下を追加しましょう。

```ruby:webpack.config.js
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/' //これを記述するとwebpackがどこにbundle.jsを返すかを指定できる
  },
```
これでwebpackが、HTMLファイルで指定した呼び出しもとにbundle.jsを返してくれるようになりました。

実際にアクセスしてみましょう。
<img width="817" alt="スクリーンショット 2020-07-07 17.11.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472442/6f3944bf-b194-3c26-bc1f-cf08d0855084.png">

dist/bundle.jsになりましたね。

これで、　tsファイルを編集して保存したタイミングで自動的にbundle.jsにも反映されるようになりました。

試しに確認してみましょう。

```ruby:main.ts
import { Foods } from "./foods";
console.log('hello'); //これを追加
Foods.getInstance();
```
これを保存したタイミングでブラウザにも反映されるはずです。
<img width="1197" alt="スクリーンショット 2020-07-07 17.20.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472442/bc8b923e-4e76-cb35-8fa7-a13773b419c1.png">

問題ないですね。

こんな感じで非常に便利になりました。