fix(webpack-cli): verbose and stats verbose flag fixed (rebase)

packages/webpack-cli/__tests__/StatsGroup.test.js

@@ -2,17 +2,20 @@ const StatsGroup = require('../lib/groups/StatsGroup');
 
 describe('StatsGroup', function () {
     {
-        StatsGroup.validOptions().map((option) => {
+        StatsGroup.validOptions().validArrayString.map((option) => {
             it(`should handle ${option} option`, () => {
-                const statsGroup = new StatsGroup([
-                    {
-                        stats: option,
-                    },
-                ]);
-
+                const statsGroup = new StatsGroup([{ stats: `${option}` }]);
                 const result = statsGroup.run();
                 expect(result.options.stats).toEqual(option);
             });
         });
+        StatsGroup.validOptions().validArrayObject.map((option) => {
+            let stats = option.stats ? option.stats : null;
+            it(`should handle verbose true with stats ${stats} option`, () => {
+                const statsGroup = new StatsGroup(option);
+                const result = statsGroup.run();
+                expect(result.options.stats).toEqual('verbose');
+            });
+        });
     }
 });

packages/webpack-cli/lib/groups/HelpGroup.js

@@ -19,12 +19,11 @@ class HelpGroup {
             const usage = chalk.keyword('orange')('webpack ' + options.usage);
             const description = options.description;
             const link = options.link;
-
             process.stdout.write(`${header('Usage')}: ${usage}\n`);
-            process.stdout.write(`${header('Description')}: ${description}\n`);
+            process.stdout.write(`\n${header('Description')}: ${description}\n`);
 
             if (link) {
-                process.stdout.write(`${header('Documentation')}: ${link}\n`);
+                process.stdout.write(`\n${header('Documentation')}: ${link}\n`);
             }
 
             if (options.flags) {
@@ -96,12 +95,16 @@ class HelpGroup {
             {
                 header: 'Available Commands',
                 content: options.commands.map((e) => {
-                    return { name: e.name, summary: e.description };
+                    return { name: e.name, summary: e.shortDesc ? e.shortDesc : e.description };
                 }),
             },
             {
                 header: 'Options',
-                optionList: options.core,
+                optionList: options.core.map((e) => {
+                    const description = e.shortDesc ? e.shortDesc : e.description;
+                    e.description = description;
+                    return e;
+                }),
             },
         ]);
         return {

packages/webpack-cli/lib/groups/StatsGroup.js

@@ -5,7 +5,9 @@ const logger = require('../utils/logger');
  */
 class StatsGroup extends GroupHelper {
     static validOptions() {
-        return ['none', 'errors-only', 'minimal', 'normal', 'detailed', 'verbose', 'errors-warnings'];
+        let validArrayString = ['none', 'errors-only', 'minimal', 'normal', 'detailed', 'verbose', 'errors-warnings'];
+        let validArrayObject = [{ verbose: true }, { verbose: true, stats: 'verbose' }];
+        return { validArrayString, validArrayObject };
     }
 
     constructor(options) {
@@ -15,14 +17,10 @@ class StatsGroup extends GroupHelper {
     resolveOptions() {
         if (this.args.verbose && this.args.stats) {
             logger.warn('Conflict between "verbose" and "stats" options. Using verbose.');
-            this.opts.option.stats = {
-                verbose: true,
-            };
+            this.opts.options.stats = 'verbose';
         } else {
             if (this.args.verbose) {
-                this.opts.option.stats = {
-                    verbose: true,
-                };
+                this.opts.options.stats = 'verbose';
             } else {
                 this.opts.options.stats = this.args.stats;
             }

packages/webpack-cli/lib/utils/GroupHelper.js

@@ -22,14 +22,18 @@ class GroupHelper {
     }
 
     arrayToObject(arr) {
-        if (!arr) {
-            return;
+        if (Array.isArray(arr)) {
+            if (!arr) {
+                return;
+            }
+            return arr.reduce((result, currentItem) => {
+                const key = Object.keys(currentItem)[0];
+                result[this.hyphenToUpperCase(key)] = currentItem[key];
+                return result;
+            }, {});
+        } else {
+            return arr;
         }
-        return arr.reduce((result, currentItem) => {
-            const key = Object.keys(currentItem)[0];
-            result[this.hyphenToUpperCase(key)] = currentItem[key];
-            return result;
-        }, {});
     }
 
     // TODO: to re implement

packages/webpack-cli/lib/utils/cli-flags.js

@@ -9,6 +9,12 @@ const ADVANCED_GROUP = 'advanced';
 const DISPLAY_GROUP = 'stats';
 const ZERO_CONFIG_GROUP = 'zero-config';
 
+function acceptedString(arr) {
+    return `Accepted Value: ${arr.join(' | ')}`;
+}
+function descriptionGenerator(example, shortDesc, acceptedValue = []) {
+    return `\n\n    Example: ${example}\n\n     ${acceptedValue.length > 0 ? acceptedString(acceptedValue) : ''}\n\n${shortDesc}`;
+}
 module.exports = {
     groups: {
         HELP_GROUP,
@@ -79,7 +85,11 @@ module.exports = {
             type: String,
             defaultOption: true,
             group: BASIC_GROUP,
-            description: 'The entry point of your application.',
+            shortDesc: 'The entry point of your application.',
+            description: descriptionGenerator(
+                'webpack --entry index.js',
+                'It is the entry point of your application. You can provide multiple entry points also.',
+            ),
             link: 'https://webpack.js.org/concepts/#entry',
         },
         {
@@ -89,7 +99,11 @@ module.exports = {
             type: String,
             defaultValue: null,
             group: CONFIG_GROUP,
-            description: 'Provide path to a webpack configuration file',
+            shortDesc: 'Provide path to a webpack configuration file',
+            description: descriptionGenerator(
+                'webpack-cli --config ./webpack.config.js',
+                'It provides path to a webpack configuration file',
+            ),
             link: 'https://webpack.js.org/configuration/',
         },
         {
@@ -136,15 +150,17 @@ module.exports = {
             alias: 'o',
             group: OUTPUT_GROUP,
             type: String,
-            description: 'Output location of the file generated by webpack',
+            shortDesc: 'Output location of the file generated by webpack',
+            description: descriptionGenerator('webpack --output ./a.js', 'Output location to the file generated by webpack'),
             link: 'https://webpack.js.org/concepts/#output',
         },
         {
             name: 'plugin',
-            usage: '--plugin',
+            usage: '--plugin <plugin name> e.g. HtmlWebpackPlugin',
             group: ADVANCED_GROUP,
             type: String,
-            description: 'Load a given plugin',
+            shortDesc: 'Load a given plugin',
+            description: descriptionGenerator('webpack --plugin ExtractTextWebpackPlugin', 'Load a plugin '),
             link: 'https://webpack.js.org/plugins/',
         },
         {
@@ -162,7 +178,17 @@ module.exports = {
             alias: 't',
             type: String,
             group: ADVANCED_GROUP,
-            description: 'Sets the build target',
+            shortDesc: 'Sets the build target',
+            description: descriptionGenerator('webpack --target node ', 'Instructs webpack to target a specific environment.', [
+                'async-node',
+                'electron-main',
+                'electron-renderer',
+                'electron-preload',
+                'node',
+                'node-webkit',
+                'web',
+                'webworker',
+            ]),
             link: 'https://webpack.js.org/configuration/target/#target',
         },
         {
@@ -272,14 +298,19 @@ module.exports = {
             name: 'stats',
             usage: '--stats verbose',
             type: (value) => {
-                if (StatsGroup.validOptions().includes(value)) {
+                if (StatsGroup.validOptions().validArrayString.includes(value)) {
                     return value;
                 }
                 logger.warn('No value recognised for "stats" option');
                 return 'normal';
             },
             group: DISPLAY_GROUP,
-            description: 'It instructs webpack on how to treat the stats',
+            shortDesc: 'It instructs webpack on how to treat the stats',
+            description: descriptionGenerator(
+                'npx webpack-cli --stats verbose',
+                'These options instructs webpack on how to treat the stats.',
+                StatsGroup.validOptions().validArrayString,
+            ),
             link: 'https://webpack.js.org/configuration/stats/#stats',
         },
         {