fix: respect --stats, --color and --no-color option for serve c…

package.json

@@ -91,7 +91,7 @@
     "strip-ansi": "^6.0.0",
     "ts-jest": "^26.4.3",
     "typescript": "^3.9.7",
-    "webpack": "^5.11.0",
+    "webpack": "^5.11.1",
     "webpack-bundle-analyzer": "^4.3.0",
     "webpack-dev-server": "^3.11.1",
     "yeoman-test": "^2.7.0"

packages/serve/src/index.ts

@@ -108,7 +108,7 @@ class ServeCommand {
                 }
 
                 try {
-                    servers = await startDevServer(compiler, devServerOptions, logger);
+                    servers = await startDevServer(compiler, devServerOptions, options, logger);
                 } catch (error) {
                     if (error.name === 'ValidationError') {
                         logger.error(error.message);

packages/serve/src/startDevServer.ts

@@ -5,12 +5,13 @@ import { devServerOptionsType } from './types';
  * Starts the devServer
  *
  * @param {Object} compiler - a webpack compiler
- * @param {Object} cliOptions - devServer args
+ * @param {Object} devServerCliOptions - dev server CLI options
+ * @param {Object} cliOptions - CLI options
  * @param {Object} logger - logger
  *
  * @returns {Object[]} array of resulting servers
  */
-export default async function startDevServer(compiler, cliOptions, logger): Promise<object[]> {
+export default async function startDevServer(compiler, devServerCliOptions, cliOptions, logger): Promise<object[]> {
     let devServerVersion, Server, findPort;
 
     try {
@@ -25,15 +26,15 @@ export default async function startDevServer(compiler, cliOptions, logger): Prom
         process.exit(2);
     }
 
-    const mergeOptions = (cliOptions: devServerOptionsType, devServerOptions: devServerOptionsType): devServerOptionsType => {
+    const mergeOptions = (devServerOptions: devServerOptionsType, devServerCliOptions: devServerOptionsType): devServerOptionsType => {
         // CLI options should take precedence over devServer options,
         // and CLI options should have no default values included
-        const options = { ...devServerOptions, ...cliOptions };
+        const options = { ...devServerOptions, ...devServerCliOptions };
 
-        if (devServerOptions.client && cliOptions.client) {
+        if (devServerOptions.client && devServerCliOptions.client) {
             // the user could set some client options in their devServer config,
             // then also specify client options on the CLI
-            options.client = { ...devServerOptions.client, ...cliOptions.client };
+            options.client = { ...devServerOptions.client, ...devServerCliOptions.client };
         }
 
         return options;
@@ -59,23 +60,48 @@ export default async function startDevServer(compiler, cliOptions, logger): Prom
     const devServersOptions = [];
 
     for (const compilerWithDevServerOption of compilersWithDevServerOption) {
-        const options = mergeOptions(cliOptions, compilerWithDevServerOption.options.devServer || {});
+        const options = mergeOptions(compilerWithDevServerOption.options.devServer || {}, devServerCliOptions);
 
         if (isDevServer4) {
             options.port = await findPort(options.port);
             options.client = options.client || {};
             options.client.port = options.client.port || options.port;
         } else {
-            if (!options.publicPath) {
-                options.publicPath =
-                    typeof compilerWithDevServerOption.options.output.publicPath === 'undefined' ||
-                    compilerWithDevServerOption.options.output.publicPath === 'auto'
-                        ? '/'
-                        : compilerWithDevServerOption.options.output.publicPath;
-            }
+            const getPublicPathOption = () => {
+                const normalizePublicPath = (publicPath) => (typeof publicPath === 'undefined' || publicPath === 'auto' ? '/' : publicPath);
+
+                if (cliOptions.outputPublicPath) {
+                    return normalizePublicPath(compilerWithDevServerOption.options.output.publicPath);
+                }
+
+                // webpack-dev-server@3
+                if (options.publicPath) {
+                    return normalizePublicPath(options.publicPath);
+                }
+
+                // webpack-dev-server@4
+                if (options.dev && options.dev.publicPath) {
+                    return normalizePublicPath(options.dev.publicPath);
+                }
+
+                return normalizePublicPath(compilerWithDevServerOption.options.output.publicPath);
+            };
+            const getStatsOption = () => {
+                if (cliOptions.stats) {
+                    return compilerWithDevServerOption.options.stats;
+                }
+
+                if (options.stats) {
+                    return options.stats;
+                }
+
+                return compilerWithDevServerOption.options.stats;
+            };
 
             options.host = options.host || 'localhost';
             options.port = options.port || 8080;
+            options.stats = getStatsOption();
+            options.publicPath = getPublicPathOption();
         }
 
         if (options.port) {

packages/serve/src/types.ts

@@ -2,7 +2,8 @@ export type devServerOptionsType = {
     bonjour?: boolean;
     client?: devServerClientOptions;
     compress?: boolean;
-    dev?: object;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    dev?: Record<string, any>;
     firewall?: boolean | string[];
     headers?: object;
     historyApiFallback?: boolean | object;
@@ -28,6 +29,8 @@ export type devServerOptionsType = {
     transportMode?: object | string;
     useLocalIp?: boolean;
     publicPath?: undefined;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    stats?: any;
 };
 
 type devServerClientOptions = {