feat(@angular/cli): update webpack-dev-server to 3.0

Author: clydin

package-lock.json

@@ -96,8 +96,8 @@
     "uglifyjs-webpack-plugin": "^1.2.2",
     "url-loader": "^0.6.2",
     "webpack": "~4.0.0",
-    "webpack-dev-middleware": "~1.12.0",
-    "webpack-dev-server": "~2.11.0",
+    "webpack-dev-middleware": "^2.0.6",
+    "webpack-dev-server": "^3.0.1-beta.0",
     "webpack-merge": "^4.1.2",
     "webpack-sources": "^1.1.0",
     "webpack-subresource-integrity": "^1.0.1"

package.json

@@ -15,8 +15,8 @@ interface IWebpackDevServerConfigurationOptions {
   };
   publicPath?: string;
   headers?: { [key: string]: string };
-  stats?: { [key: string]: boolean } | string;
-  inline: boolean;
+  stats?: { [key: string]: boolean } | string | boolean;
+  inline?: boolean;
   https?: boolean;
   key?: string;
   cert?: string;

packages/@angular/cli/custom-typings.d.ts

@@ -80,8 +80,8 @@
     "uglifyjs-webpack-plugin": "^1.2.2",
     "url-loader": "^0.6.2",
     "webpack": "~4.0.0",
-    "webpack-dev-middleware": "~1.12.0",
-    "webpack-dev-server": "~2.11.0",
+    "webpack-dev-middleware": "^2.0.6",
+    "webpack-dev-server": "^3.0.1-beta.0",
     "webpack-merge": "^4.1.2",
     "webpack-sources": "^1.1.0",
     "webpack-subresource-integrity": "^1.0.1"

packages/@angular/cli/package.json

@@ -156,7 +156,7 @@ export default Task.extend({
       // we can override the file watcher instead.
       webpackConfig.plugins.unshift({
         apply: (compiler: any) => {
-          compiler.plugin('after-environment', () => {
+          compiler.hooks.afterEnvironment.tap('angular-cli', () => {
             compiler.watchFileSystem = { watch: () => { } };
           });
         }
@@ -166,7 +166,7 @@ export default Task.extend({
     webpackCompiler = webpack(webpackConfig);
 
     if (rebuildDoneCb) {
-      webpackCompiler.plugin('done', rebuildDoneCb);
+      webpackCompiler.hooks.done.tap('angular-cli', rebuildDoneCb);
     }
 
     const statsConfig = getWebpackStatsConfig(serveTaskOptions.verbose);
@@ -222,8 +222,7 @@ export default Task.extend({
         disableDotRule: true,
         htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
       },
-      stats: serveTaskOptions.verbose ? statsConfig : 'none',
-      inline: true,
+      stats: serveTaskOptions.verbose ? statsConfig : false,
       proxy: proxyConfig,
       compress: serveTaskOptions.target === 'production',
       watchOptions: {
@@ -237,16 +236,15 @@ export default Task.extend({
       contentBase: false,
       public: serveTaskOptions.publicHost,
       disableHostCheck: serveTaskOptions.disableHostCheck,
-      publicPath: servePath
+      publicPath: servePath,
+      hot: serveTaskOptions.hmr,
     };
 
     if (sslKey != null && sslCert != null) {
       webpackDevServerConfiguration.key = sslKey;
       webpackDevServerConfiguration.cert = sslCert;
     }
 
-    webpackDevServerConfiguration.hot = serveTaskOptions.hmr;
-
     if (serveTaskOptions.target === 'production') {
       ui.writeLine(chalk.red(stripIndents`
         ****************************************************************************************
@@ -266,8 +264,9 @@ export default Task.extend({
     `));
 
     const server = new WebpackDevServer(webpackCompiler, webpackDevServerConfiguration);
-    if (!serveTaskOptions.verbose) {
-      webpackCompiler.plugin('done', (stats: any) => {
+
+    webpackCompiler.hooks.done.tap('angular-cli', (stats: webpack.Stats) => {
+      if (!serveTaskOptions.verbose) {
         const json = stats.toJson(statsConfig);
         this.ui.writeLine(statsToString(json, statsConfig));
         if (stats.hasWarnings()) {
@@ -276,21 +275,23 @@ export default Task.extend({
         if (stats.hasErrors()) {
           this.ui.writeError(statsErrorsToString(json, statsConfig));
         }
-      });
-    }
+      }
+
+      if (serveTaskOptions.open) {
+        opn(serverAddress + servePath);
+      }
+    });
 
     return new Promise((_resolve, reject) => {
       const httpServer = server.listen(
         serveTaskOptions.port,
         serveTaskOptions.host,
-        (err: any, _stats: any) => {
+        (err: any) => {
           if (err) {
-            return reject(err);
-          }
-          if (serveTaskOptions.open) {
-            opn(serverAddress + servePath);
+            reject(err);
           }
-        });
+        },
+      );
       // Node 8 has a keepAliveTimeout bug which doesn't respect active connections.
       // Connections will end after ~5 seconds (arbitrary), often not letting the full download
       // of large pieces of content, such as a vendor javascript file.  This results in browsers
@@ -304,9 +305,8 @@ export default Task.extend({
     })
     .catch((err: Error) => {
       if (err) {
-        this.ui.writeError('\nAn error occured during the build:\n' + ((err && err.stack) || err));
+        this.ui.writeError('\nAn error occured during the build:\n' + (err.stack || err));
       }
-      throw err;
     });
   }
 });

packages/@angular/cli/tasks/serve.ts

@@ -58,7 +58,7 @@ export default function () {
     })
     // Should run side-by-side with `ng serve`
     .then(() => execAndWaitForOutputToMatch('ng', ['serve'],
-      /webpack: Compiled successfully./))
+      /: Compiled successfully./))
     .then(() => ng('e2e'))
     .then(() => killAllProcesses(), (err: any) => {
       killAllProcesses();

tests/e2e/tests/basic/e2e.ts

@@ -9,7 +9,7 @@ import {wait} from '../../utils/utils';
 import {request} from '../../utils/http';
 import {getGlobalVariable} from '../../utils/env';
 
-const validBundleRegEx = /webpack: bundle is now VALID|webpack: Compiled successfully./;
+const validBundleRegEx = /: Compiled successfully./;
 
 export default function() {
   if (process.platform.startsWith('win')) {

tests/e2e/tests/basic/rebuild.ts

@@ -8,7 +8,7 @@ import { getGlobalVariable } from '../../../utils/env';
 import { request } from '../../../utils/http';
 import { wait } from '../../../utils/utils';
 
-const validBundleRegEx = /webpack: bundle is now VALID|webpack: Compiled successfully./;
+const validBundleRegEx = /: Compiled successfully./;
 
 export default function () {
   if (process.platform.startsWith('win')) {

tests/e2e/tests/build/aot/aot-rebuild.ts

@@ -10,7 +10,7 @@ export default function() {
 
   return Promise.resolve()
     // Check that ng serve has eval sourcemaps by default.
-    .then(() => execAndWaitForOutputToMatch('ng', ['serve'], /webpack: Compiled successfully/))
+    .then(() => execAndWaitForOutputToMatch('ng', ['serve'], /: Compiled successfully/))
     .then((output) => {
       const stdout = output.stdout;
       if (/\.js\.map/.test(stdout)) {

tests/e2e/tests/build/eval-sourcemap.ts

@@ -6,7 +6,7 @@ import {
 import {appendToFile} from '../../utils/fs';
 import {expectToFail, wait} from '../../utils/utils';
 
-const webpackGoodRegEx = /webpack: Compiled successfully./;
+const webpackGoodRegEx = /: Compiled successfully./;
 
 export default function() {