Add webpack 4 support to aspnet-webpack

src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/package.json

@@ -21,18 +21,18 @@
     "es6-promise": "^3.1.2",
     "memory-fs": "^0.3.0",
     "require-from-string": "^1.1.0",
-    "webpack-dev-middleware": "^1.8.4",
     "webpack-node-externals": "^1.4.3"
   },
   "devDependencies": {
     "@types/connect": "^3.4.30",
     "@types/node": "^6.0.42",
-    "@types/webpack": "^2.2.0",
+    "@types/webpack": "^4.1.3",
     "rimraf": "^2.5.4",
     "typescript": "^2.0.0",
-    "webpack": "^1.13.2"
+    "webpack": "^4.5.0"
   },
   "peerDependencies": {
-    "webpack": "^1.13.2 || ^2.1.0-beta || ^3.0.0"
+    "webpack": "^1.13.2 || ^2.1.0-beta || ^3.0.0 || ^4.0.0",
+    "webpack-dev-middleware": "^1.8.4 || ^3.0.0"
   }
 }

src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/src/LoadViaWebpack.ts

@@ -90,9 +90,12 @@ function loadViaWebpackNoCache<T>(webpackConfigPath: string, modulePath: string)
         }));
 
         // The CommonsChunkPlugin is not compatible with a CommonJS environment like Node, nor is it needed in that case
-        webpackConfig.plugins = webpackConfig.plugins.filter(plugin => {
+        const ChunkPlugin = webpack.optimize['CommonsChunkPlugin'];
-            return !(plugin instanceof webpack.optimize.CommonsChunkPlugin);
+        if (ChunkPlugin !== undefined) {
-        });
+            webpackConfig.plugins = webpackConfig.plugins.filter(plugin => {
+                return !(plugin instanceof ChunkPlugin);
+            });
+        }
 
         // The typical use case for DllReferencePlugin is for referencing vendor modules. In a Node
         // environment, it doesn't make sense to load them from a DLL bundle, nor would that even

src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/src/WebpackDevMiddleware.ts

@@ -121,6 +121,7 @@ function attachWebpackDevMiddleware(app: any, webpackConfig: webpack.Configurati
     const compiler = webpack(webpackConfig);
     app.use(require('webpack-dev-middleware')(compiler, {
         noInfo: true,
+        stats: webpackConfig.stats,
         publicPath: ensureLeadingSlash(webpackConfig.output.publicPath),
         watchOptions: webpackConfig.watchOptions
     }));
@@ -133,9 +134,12 @@ function attachWebpackDevMiddleware(app: any, webpackConfig: webpack.Configurati
     // middleware's in-memory filesystem only (and not on disk) would confuse the debugger, because the
     // file on disk wouldn't match the file served to the browser, and the source map line numbers wouldn't
     // match up. Breakpoints would either not be hit, or would hit the wrong lines.
-    (compiler as any).plugin('done', stats => {
+    const copy = stats => copyRecursiveToRealFsSync(compiler.outputFileSystem, '/', [/\.hot-update\.(js|json|js\.map)$/]);
-        copyRecursiveToRealFsSync(compiler.outputFileSystem, '/', [/\.hot-update\.(js|json|js\.map)$/]);
+    if (compiler.hooks) {
-    });
+        compiler.hooks.done.tap('aspnet-webpack', copy);
+    } else {
+        compiler.plugin('done', copy);
+    }
 
     if (enableHotModuleReplacement) {
         let webpackHotMiddlewareModule;