Allow webpack configs to be authored in typescript (fixes #1241)

src/Microsoft.AspNetCore.SpaServices/Webpack/WebpackDevMiddleware.cs

@@ -13,7 +13,7 @@ namespace Microsoft.AspNetCore.Builder
     /// </summary>
     public static class WebpackDevMiddleware
     {
-        private const string DefaultConfigFile = "webpack.config.js";
+        private const string DefaultConfigFileNoExtension = "webpack.config";
 
         private static readonly JsonSerializerSettings jsonSerializerSettings = new JsonSerializerSettings
         {
@@ -87,10 +87,14 @@ public static void UseWebpackDevMiddleware(
                 ? options.HotModuleReplacementEndpoint
                 : "/__webpack_hmr"; // Matches webpack's built-in default
 
+            var defaultConfigFileExtension = options.UseTypeScriptConfig ? "ts" : "js";
+            var defaultConfigFile = $"{DefaultConfigFileNoExtension}.{defaultConfigFileExtension}";
+
             // Tell Node to start the server hosting webpack-dev-middleware
             var devServerOptions = new
             {
-                webpackConfigPath = Path.Combine(nodeServicesOptions.ProjectPath, options.ConfigFile ?? DefaultConfigFile),
+                webpackConfigPath = Path.Combine(nodeServicesOptions.ProjectPath, options.ConfigFile ?? defaultConfigFile),
+                useTypeScriptConfig = options.UseTypeScriptConfig,
                 suppliedOptions = options,
                 understandsMultiplePublicPaths = true,
                 hotModuleReplacementEndpointUrl = hmrEndpoint

src/Microsoft.AspNetCore.SpaServices/Webpack/WebpackDevMiddlewareOptions.cs

@@ -36,10 +36,15 @@ public class WebpackDevMiddlewareOptions
         public IDictionary<string, string> HotModuleReplacementClientOptions { get; set; } 
 
         /// <summary>
-        /// Specifies the Webpack configuration file to be used. If not set, defaults to 'webpack.config.js'.
+        /// Specifies the Webpack configuration file to be used. If not set, defaults to 'webpack.config.(js|ts) dependent upon UseTypeScriptConfig option'.
         /// </summary>
         public string ConfigFile { get; set; }
 
+        /// <summary>
+        /// Specifies the Webpack configuration is written in typescript and must be transpiled.
+        /// </summary>
+        public bool UseTypeScriptConfig { get; set; }
+
         /// <summary>
         /// The root path of your project. Webpack runs in this context.
         /// </summary>

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

@@ -19,6 +19,7 @@ export interface CreateDevServerCallback {
 // These are the options passed by WebpackDevMiddleware.cs
 interface CreateDevServerOptions {
     webpackConfigPath: string;
+    useTypeScriptConfig: boolean;
     suppliedOptions: DevServerOptions;
     hotModuleReplacementEndpointUrl: string;
 }
@@ -236,6 +237,10 @@ export function createWebpackDevServer(callback: CreateDevServerCallback, option
         return;
     }
 
+    if (options.useTypeScriptConfig) {
+      require('ts-node/register');
+    }
+
     // Read the webpack config's export, and normalize it into the more general 'array of configs' format
     const webpackConfigModuleExports: WebpackConfigModuleExports = requireNewCopy(options.webpackConfigPath);
     let webpackConfigExport = (webpackConfigModuleExports as EsModuleExports<{}>).__esModule === true