More than 5 years have passed since last update.

ホットリロードで毎回ビルドする方法(nodemon)

Last updated at 2019-10-07Posted at 2019-10-07

はじめに

webpack-dev-serverはどうやらビルドを毎回してくれないみたい(速度の関係上?)なので、.tsや.tsxを変更するとdist/main.jsが毎回生成されるようにしたかった。
webpackは導入済みを前提として書いていきます。

nodemonというソースを監視して自動でサーバーを再起動してくれるツールがあるみたい。(参考: Qiita - nodemonとは? @mitsuhiro_K)
このnodemonをインストール

$ yarn add nodemon -D

package.jsonのスクリプトに追加

./package.json

"scripts": {
    "build": "webpack",
    "watch": "webpack -w",
    "nodemon": "nodemon"
}

nodemon.jsonを作って、以下の記入

./nodemon.json

{
  "watch": ["src"],   
  "ext": "ts,tsx",   
  "exec": "webpack"  
}

これで、srcディレクトリの.tsと.tsxを監視して、変更されたらwebpackを実行してくれるらしい。

$ yarn nodemon