feat(@angular-devkit/build-webpack): add API builder for dev server

It outputs the port and address that it is bound to.

Author: hansl

packages/_/devkit/package/schema.d.ts

@@ -7,7 +7,14 @@
       "schema": "./src/webpack/schema.json",
       "description": "Build a webpack app."
     },
+    "dev-server": {
+      "implementation": "./src/webpack-dev-server/index2",
+      "class": "./src/webpack-dev-server",
+      "schema": "./src/webpack-dev-server/schema.json",
+      "description": "Serve a webpack app."
+    },
     "webpack-dev-server": {
+      "implementation": "./src/webpack-dev-server/index2",
       "class": "./src/webpack-dev-server",
       "schema": "./src/webpack-dev-server/schema.json",
       "description": "Serve a webpack app."

packages/angular_devkit/build_webpack/builders.json

@@ -19,7 +19,7 @@ import { concatMap } from 'rxjs/operators';
 import * as webpack from 'webpack';
 import * as WebpackDevServer from 'webpack-dev-server';
 import { LoggingCallback, defaultLoggingCb } from '../webpack';
-import { WebpackDevServerBuilderSchema } from './schema';
+import { Schema as WebpackDevServerBuilderSchema } from './schema';
 
 export interface DevServerResult {
   port: number;

packages/angular_devkit/build_webpack/src/webpack-dev-server/index.ts

@@ -0,0 +1,101 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import { BuilderContext, BuilderOutput, createBuilder } from '@angular-devkit/architect/src/index2';
+import { getSystemPath, json, normalize, resolve } from '@angular-devkit/core';
+import * as net from 'net';
+import { Observable, from, of } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import * as webpack from 'webpack';
+import * as WebpackDevServer from 'webpack-dev-server';
+import { ArchitectPlugin } from '../plugins/architect';
+import { WebpackFactory, WebpackLoggingCallback } from '../webpack/index2';
+import { Schema as WebpackDevServerBuilderSchema } from './schema';
+
+const webpackMerge = require('webpack-merge');
+
+
+export type DevServerBuildResult = BuilderOutput & {
+  port: number;
+  family: string;
+  address: string;
+};
+
+export function runWebpackDevServer(
+  config: webpack.Configuration,
+  context: BuilderContext,
+  options: {
+    devServerConfig?: WebpackDevServer.Configuration,
+    logging?: WebpackLoggingCallback,
+    webpackFactory?: WebpackFactory,
+  } = {},
+): Observable<BuilderOutput> {
+  const createWebpack = options.webpackFactory || (config => of(webpack(config)));
+  const log: WebpackLoggingCallback = options.logging
+    || ((stats, config) => context.logger.info(stats.toString(config.stats)));
+
+  config = webpackMerge(config, {
+    plugins: [
+      new ArchitectPlugin(context),
+    ],
+  });
+
+  const devServerConfig = options.devServerConfig || config.devServer || {};
+  if (devServerConfig.stats) {
+    config.stats = devServerConfig.stats as webpack.Stats.ToStringOptionsObject;
+  }
+  // Disable stats reporting by the devserver, we have our own logger.
+  devServerConfig.stats = false;
+
+  return createWebpack(config).pipe(
+    switchMap(webpackCompiler => new Observable<BuilderOutput>(obs => {
+      const server = new WebpackDevServer(webpackCompiler, devServerConfig);
+      let result: DevServerBuildResult;
+
+      webpackCompiler.hooks.done.tap('build-webpack', (stats) => {
+        // Log stats.
+        log(stats, config);
+
+        obs.next({
+          ...result,
+          success: !stats.hasErrors(),
+        } as DevServerBuildResult);
+      });
+
+      server.listen(
+        devServerConfig.port === undefined ? 8080 : devServerConfig.port,
+        devServerConfig.host === undefined ? 'localhost' : devServerConfig.host,
+        function (this: net.Server, err) {
+          if (err) {
+            obs.error(err);
+          } else {
+            result = {
+              success: true,
+              port: this.address().port,
+              family: this.address().family,
+              address: this.address().address,
+            };
+          }
+        },
+      );
+
+      // Teardown logic. Close the server when unsubscribed from.
+      return () => server.close();
+    })),
+  );
+}
+
+
+export default createBuilder<
+  json.JsonObject & WebpackDevServerBuilderSchema, DevServerBuildResult
+>((options, context) => {
+  const configPath = resolve(normalize(context.workspaceRoot), normalize(options.webpackConfig));
+
+  return from(import(getSystemPath(configPath))).pipe(
+    switchMap((config: webpack.Configuration) => runWebpackDevServer(config, context)),
+  );
+});

packages/angular_devkit/build_webpack/src/webpack-dev-server/index2.ts

@@ -1,4 +1,5 @@
 {
+  "$schema": "http://json-schema.org/schema",
   "title": "Webpack Dev-Server Builder",
   "description": "Webpack Dev-Server Builder schema for Architect.",
   "type": "object",
@@ -12,4 +13,4 @@
   "required": [
     "webpackConfig"
   ]
-}
+}