chore(controller): change the webpack watch logic

webpack v5 requires a callback passed to the compiler instead of
using .watch()

Author: Ryan Clark

lib/KarmaWebpackController.js

@@ -26,7 +26,7 @@ class KarmaSyncPlugin {
         }`;
         this.controller.bundlesContent[webpackFileObj.name] = fs.readFileSync(
           filePath,
-          'utf-8'
+          'utf-8',
         );
       });
 
@@ -88,13 +88,8 @@ class KarmaWebpackController {
       new KarmaSyncPlugin({
         karmaEmitter: emitter,
         controller: this,
-      })
+      }),
     );
-
-    emitter.on('exit', (done) => {
-      this.onKarmaExit();
-      done();
-    });
   }
 
   get karmaEmitter() {
@@ -112,6 +107,15 @@ class KarmaWebpackController {
     this.webpackOptions = defaultWebpackOptions;
   }
 
+  setupExitHandler(compiler) {
+    this.karmaEmitter.once('exit', (done) => {
+      compiler.close(() => {
+        console.log('Webpack stopped watching.');
+        done();
+      });
+    });
+  }
+
   updateWebpackOptions(newOptions) {
     this.webpackOptions = merge(this.webpackOptions, newOptions);
   }
@@ -126,16 +130,18 @@ class KarmaWebpackController {
 
   async _bundle() {
     this.isActive = true;
-    this.compiler = webpack(this.webpackOptions);
+
     return new Promise((resolve) => {
       if (this.webpackOptions.watch === true) {
         console.log('Webpack starts watching...');
-        this.webpackFileWatcher = this.compiler.watch({}, (err, stats) =>
-          this.handleBuildResult(err, stats, resolve)
+        this.compiler = webpack(this.webpackOptions, (err, stats) =>
+          this.handleBuildResult(err, stats, resolve),
         );
+
+        this.setupExitHandler(this.compiler);
       } else {
-        this.compiler.run((err, stats) =>
-          this.handleBuildResult(err, stats, resolve)
+        this.compiler = webpack(this.webpackOptions).run((err, stats) =>
+          this.handleBuildResult(err, stats, resolve),
         );
       }
     });
@@ -164,13 +170,6 @@ class KarmaWebpackController {
     console.log(stats.toString(this.webpackOptions.stats));
     resolve();
   }
-
-  onKarmaExit() {
-    if (this.webpackFileWatcher) {
-      this.webpackFileWatcher.close();
-      console.log('Webpack stopped watching.');
-    }
-  }
 }
 
 module.exports = {