added webpack hot reload server

package.json

@@ -4,6 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "start": "webpack serve",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
@@ -15,6 +16,8 @@
   "devDependencies": {
     "ts-loader": "^8.0.13",
     "typescript": "^4.1.3",
-    "webpack": "^5.11.1"
+    "webpack": "^5.11.1",
+    "webpack-cli": "^4.3.1",
+    "webpack-dev-server": "^3.11.2"
   }
 }

src/app.ts

@@ -4,25 +4,21 @@ import VideoController from './Controllers/VideoController'
 import ObjectDetector from './Models/ObjectDetector'
 import PredictedObject from "./Models/PredictedObject"
 
+const defaultPredictions = [
+  (prediction: DetectedObject) => prediction.score > 0.6,
+  (prediction: DetectedObject) => prediction.class === 'cat',
+]
+
 class App {
   private predictedObjectCollectionController: PredictedObjectCollectionController
   private videoController: VideoController
   private objectDetector: ObjectDetector
 
   constructor () {
-    this.objectDetector = new ObjectDetector({
+    console.log('starting')
-      filterPredicates: [
+    this.objectDetector = new ObjectDetector({ filterPredicates: defaultPredictions })
-        (prediction: DetectedObject) => prediction.score > 0.6,
-        (prediction: DetectedObject) => prediction.class === 'cat',
-      ]
-    })
-
     this.predictedObjectCollectionController = new PredictedObjectCollectionController()
-
+    this.videoController = new VideoController({  width: 640, height: 480 })
-    this.videoController = new VideoController({
-      width: 640,
-      height: 480
-    })
     this.predictImage()
   }
 

webpack.config.js

@@ -3,6 +3,10 @@ const path = require('path');
 module.exports = {
   entry: './src/app.ts',
   devtool: 'inline-source-map',
+  devServer: {
+    contentBase: './dist',
+   hot: true,
+  },
   module: {
     rules: [
       {