chore(serve): add handling for multiple devServer configs

Author: knagaitsev

packages/serve/src/createConfig.ts

@@ -23,5 +23,10 @@ export default function createConfig(args): any {
         delete options.hotOnly;
     }
 
+    // name is a valid CLI flag, but not a devServer option
+    if (options.name) {
+        delete options.name;
+    }
+
     return options;
 }

packages/serve/src/getDevServerOptions.ts

@@ -1,24 +1,46 @@
+import logger from 'webpack-cli/lib/utils/logger';
+
 /**
  *
  * Get the devServer option from the user's compiler options
  *
  * @param {Object} compiler - webpack compiler
+ * @param {Object} args - devServer args
  *
  * @returns {Object}
  */
-export default function getDevServerOptions(compiler): any {
-    let devServerOptions;
-    if (compiler.compilers) {
-        // devServer options could be found in any of the compilers,
-        // so simply find the first instance and use it, if there is one
-        const comp = compiler.compilers.find((comp) => comp.options.devServer);
-        if (comp) {
-            devServerOptions = comp.options.devServer;
+export default function getDevServerOptions(compiler, args): any {
+    const defaultOpts = {};
+    const devServerOptions = [];
+    const compilers = compiler.compilers || [compiler];
+    if (args.name) {
+        let comp = compilers.find((comp) => comp.name === args.name);
+        // name could be an index to a compiler
+        if (!comp && /^[0-9]$/.test(args.name)) {
+            const index = +args.name;
+            comp = compilers[index];
+        }
+
+        if (comp && comp.options.devServer) {
+            devServerOptions.push(comp.options.devServer);
+        } else if (!comp) {
+            // no compiler found
+            logger.warn(`webpack config not found with name: ${comp.name}. Using default devServer config`);
+        } else {
+            // no devServer config found for compiler
+            logger.warn('devServer config not found in specified webpack config. Using default devServer config');
         }
     } else {
-        devServerOptions = compiler.options.devServer;
+        compilers.forEach((comp) => {
+            if (comp.options.devServer) {
+                devServerOptions.push(comp.options.devServer);
+            }
+        });
+    }
+
+    if (devServerOptions.length === 0) {
+        devServerOptions.push(defaultOpts);
     }
-    devServerOptions = devServerOptions || {};
 
     return devServerOptions;
 }

packages/serve/src/startDevServer.ts

@@ -14,16 +14,27 @@ import mergeOptions from './mergeOptions';
  */
 export default function startDevServer(compiler, args): void {
     const cliOptions = createConfig(args);
-    const devServerOptions = getDevServerOptions(compiler);
-    const options = mergeOptions(cliOptions, devServerOptions);
+    const devServerOptions = getDevServerOptions(compiler, args);
 
-    options.host = options.host || 'localhost';
-    options.port = options.port || 8080;
+    const usedPorts = [];
+    devServerOptions.forEach((devServerOpts): void => {
+        const options = mergeOptions(cliOptions, devServerOpts);
 
-    const server = new Server(compiler, options);
-    server.listen(options.port, options.host, (err): void => {
-        if (err) {
-            throw err;
+        options.host = options.host || 'localhost';
+        options.port = options.port || 8080;
+
+        if (usedPorts.find(options.port)) {
+            throw new Error(
+                'Unique ports must be specified for each devServer option in your webpack configuration. Alternatively, run only 1 devServer config using the --name flag to specify your desired config.',
+            );
         }
+        usedPorts.push(options.port);
+
+        const server = new Server(compiler, options);
+        server.listen(options.port, options.host, (err): void => {
+            if (err) {
+                throw err;
+            }
+        });
     });
 }