Fix webpack dev server (#10130)

build-scripts/gulp/webpack.js

@@ -35,26 +35,29 @@ const isWsl =
  *   listenHost?: string
  * }}
  */
-const runDevServer = ({
+const runDevServer = async ({
   compiler,
   contentBase,
   port,
   listenHost = "localhost",
-}) =>
-  new WebpackDevServer(compiler, {
-    open: true,
-    watchContentBase: true,
-    contentBase,
-  }).listen(port, listenHost, (err) => {
-    if (err) {
-      throw err;
-    }
-    // Server listening
-    log(
-      "[webpack-dev-server]",
-      `Project is running at http://localhost:${port}`
-    );
-  });
+}) => {
+  const server = new WebpackDevServer(
+    {
+      open: true,
+      host: listenHost,
+      port,
+      static: {
+        directory: contentBase,
+        watch: true,
+      },
+    },
+    compiler
+  );
+
+  await server.start();
+  // Server listening
+  log("[webpack-dev-server]", `Project is running at http://localhost:${port}`);
+};
 
 const doneHandler = (done) => (err, stats) => {
   if (err) {
@@ -107,13 +110,13 @@ gulp.task("webpack-prod-app", () =>
   )
 );
 
-gulp.task("webpack-dev-server-demo", () => {
+gulp.task("webpack-dev-server-demo", () =>
   runDevServer({
     compiler: webpack(bothBuilds(createDemoConfig, { isProdBuild: false })),
     contentBase: paths.demo_output_root,
     port: 8090,
-  });
-});
+  })
+);
 
 gulp.task("webpack-prod-demo", () =>
   prodBuild(
@@ -123,15 +126,15 @@ gulp.task("webpack-prod-demo", () =>
   )
 );
 
-gulp.task("webpack-dev-server-cast", () => {
+gulp.task("webpack-dev-server-cast", () =>
   runDevServer({
     compiler: webpack(bothBuilds(createCastConfig, { isProdBuild: false })),
     contentBase: paths.cast_output_root,
     port: 8080,
     // Accessible from the network, because that's how Cast hits it.
     listenHost: "0.0.0.0",
-  });
-});
+  })
+);
 
 gulp.task("webpack-prod-cast", () =>
   prodBuild(
@@ -164,14 +167,14 @@ gulp.task("webpack-prod-hassio", () =>
   )
 );
 
-gulp.task("webpack-dev-server-gallery", () => {
+gulp.task("webpack-dev-server-gallery", () =>
   runDevServer({
     // We don't use the es5 build, but the dev server will fuck up the publicPath if we don't
     compiler: webpack(bothBuilds(createGalleryConfig, { isProdBuild: false })),
     contentBase: paths.gallery_output_root,
     port: 8100,
-  });
-});
+  })
+);
 
 gulp.task("webpack-prod-gallery", () =>
   prodBuild(