現状、bundle.jsを作成するときは以下のコマンドを毎回実行しています。
npm run build
これって正直面倒ですよね、、、
tcsコマンドのウォッチモードのように自動でbuildしてくれたら楽なのになって思います。
そんな時に使えるのがwebpack-dev-serverです
tsファイルを編集して保存した瞬間にbunsle.jsに反映しブラウザをリロードしてくれるという優れものです。
1.webpack-dev-serverをインストールする
以下のコマンドを実行する。
npm install --save-dev webpack-dev-server
2.設定ファイルに記述
package.jsonのscriptタグの中に以下を記述します。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server" //これを追加
},
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にアクセスするとアプリケーションのページが表示されるようになる。
------ここから少しややこしくなります------
実はwebpack-dev-serverは起動時にbundle.jsを作成しています。
しかし、ローカルのディレクトリに作られるわけではありません。
ん？どういうこと？って感じですよね。
なるべくわかりやすく説明します。
現状のファイル構造はこうなっています。
distフォルダの中にbundleされたjsファイルがあります。
これを一度消した上で再度webpack-dev-serverを起動させてみます。
あれ、作られませんね。。。
bundle.jsは作りますが、ファイルは作らないんです。
ん？どういうこと？となりますよね。
webpackが内部的にもっているんです。
その内部的にもっているbundle.jsにアクセスする方法があります。
URLに ' /budle.js ' を追加するとアクセスできます。
これで、bundle.jsが作られていることがわかりますね。
しかし、localhost:8080にアクセスしてもjsファイルが読み込まれていません。
その理由は、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に以下を追加しましょう。
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/' //これを記述するとwebpackがどこにbundle.jsを返すかを指定できる
},
これでwebpackが、HTMLファイルで指定した呼び出しもとにbundle.jsを返してくれるようになりました。
実際にアクセスしてみましょう。
dist/bundle.jsになりましたね。
これで、 tsファイルを編集して保存したタイミングで自動的にbundle.jsにも反映されるようになりました。
試しに確認してみましょう。
import { Foods } from "./foods";
console.log('hello'); //これを追加
Foods.getInstance();
これを保存したタイミングでブラウザにも反映されるはずです。
問題ないですね。
こんな感じで非常に便利になりました。