feat(webpack-cli): webpack stats (#1299)

* feat(webpack-cli): stats

Amended also the usage of output. `--standard` has been removed and `--pretty` will show the fancy output, which is experimental.

* tests: added git ignore to the tests

* tests: fixed missing tests

* chore(ci): fix travis build step

* tests: remove dodgy test case

* tests: removed snapshot

* docs: fixed grammar

Author: ematipico

.travis.yml

@@ -26,6 +26,7 @@ install:
     - lerna bootstrap
     - yarn global add codecov
     - yarn global add eslint
+    - yarn prepsuite
 script:
     - yarn travis:lint
     - yarn test:ci

packages/webpack-cli/README.md

@@ -50,6 +50,7 @@ Options
   -h, --hot                Enables Hot Module Replacement
   -s, --sourcemap string   Determine source maps to use
   --prefetch string        Prefetch this request
+  --pretty                 Prints a fancy output
   -j, --json               Prints result as JSON
   --standard               Prints standard output
   -d, --dev                Run development build
@@ -58,6 +59,8 @@ Options
   --no-mode                Sets mode="none" which disables any default behavior
   --version                Get current version
   --node-args string[]     NodeJS flags
+  --stats type             It instructs webpack on how to treat the stats
+  --verbose                It tells webpack to output all the information
 ```
 
 ## Defaults

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

@@ -0,0 +1,18 @@
+const StatsGroup = require('../lib/groups/StatsGroup');
+
+describe('StatsGroup', function() {
+    {
+        StatsGroup.validOptions().map(option => {
+            it(`should handle ${option} option`, () => {
+                const statsGroup = new StatsGroup([
+                    {
+                        stats: option,
+                    },
+                ]);
+
+                const result = statsGroup.run();
+                expect(result.options.stats).toEqual(option);
+            });
+        });
+    }
+});

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

@@ -1,21 +1,36 @@
 const GroupHelper = require('../utils/GroupHelper');
-
+const { logger } = require('@webpack-cli/logger');
 /**
  * StatsGroup gathers information about the stats options
  */
 class StatsGroup extends GroupHelper {
+    static validOptions() {
+        return ['minimal', 'none', 'normal', 'verbose', 'errors-warnings', 'errors-only'];
+    }
+
     constructor(options) {
         super(options);
     }
 
     resolveOptions() {
-        Object.keys(this.args).forEach(arg => {
-            if (['quiet', 'verbose', 'json', 'silent', 'standard'].includes(arg)) {
-                this.opts.outputOptions[arg] = this.args[arg];
+        if (this.args.verbose && this.args.stats) {
+            logger.warn('Conflict between "verbose" and "stats" options. Using verbose.');
+            this.opts.option.stats = {
+                verbose: true,
+            };
+        } else {
+            if (this.args.verbose) {
+                this.opts.option.stats = {
+                    verbose: true,
+                };
             } else {
-                this.opts.options[arg] = this.args[arg];
+                this.opts.options.stats = this.args.stats;
             }
-        });
+        }
+
+        if (this.args.pretty) {
+            this.opts.outputOptions.pretty = true;
+        }
     }
 
     run() {

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

@@ -78,9 +78,7 @@ class Compiler {
     }
 
     generateOutput(outputOptions, stats, statsErrors, processingMessageBuffer) {
-        if (outputOptions.standard) {
-            this.output.generateRawOutput(stats);
-        } else {
+        if (outputOptions.pretty) {
             const statsObj = stats.toJson(outputOptions);
             if (statsObj.children && Array.isArray(statsObj.children) && this.compilerOptions && Array.isArray(this.compilerOptions)) {
                 statsObj.children.forEach(child => {
@@ -89,6 +87,8 @@ class Compiler {
                 return;
             }
             this.output.generateFancyOutput(statsObj, statsErrors, processingMessageBuffer);
+        } else {
+            this.output.generateRawOutput(stats, this.compilerOptions);
         }
         process.stdout.write('\n');
         if (outputOptions.watch) {

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

@@ -110,8 +110,8 @@ class CompilerOutput {
         return statsObj;
     }
 
-    generateRawOutput(stats) {
-        process.stdout.write(stats.toString());
+    generateRawOutput(stats, options) {
+        process.stdout.write(stats.toString(options.stats));
     }
 
     generateJsonOutput() {}

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

@@ -1,4 +1,6 @@
 const { logger } = require('@webpack-cli/logger');
+const StatsGroup = require('../groups/StatsGroup');
+
 const HELP_GROUP = 'help';
 const CONFIG_GROUP = 'config';
 const BASIC_GROUP = 'basic';
@@ -243,25 +245,25 @@ module.exports = {
         },
         {
             name: 'prefetch',
-            usage: '--prefetch <request>',
+            usage: 'webpack --prefetch <request>',
             type: String,
             group: ADVANCED_GROUP,
             description: 'Prefetch this request',
             link: 'https://webpack.js.org/plugins/prefetch-plugin/',
         },
         {
             name: 'json',
-            usage: '--json',
+            usage: 'webpack --json',
             type: Boolean,
             alias: 'j',
             description: 'Prints result as JSON',
             group: DISPLAY_GROUP,
         },
         {
-            name: 'standard',
-            usage: '--standard',
+            name: 'pretty',
+            usage: 'webpack --pretty',
             type: Boolean,
-            description: 'Prints standard output',
+            description: 'Prints a fancy output',
             group: DISPLAY_GROUP,
         },
         {
@@ -322,6 +324,27 @@ module.exports = {
             group: BASIC_GROUP,
             description: 'NodeJS flags',
         },
+        {
+            name: 'stats',
+            usage: 'webpack --stats verbose',
+            type: value => {
+                if (StatsGroup.validOptions().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',
+            link: 'https://webpack.js.org/configuration/stats/#stats',
+        },
+        {
+            name: 'verbose',
+            usage: 'webpack --verbose',
+            type: Boolean,
+            group: DISPLAY_GROUP,
+            description: 'It tells webpack to output all the information',
+        },
         /* 		{
 			name: "analyze",
 			type: Boolean,

test/.eslintrc

@@ -0,0 +1,10 @@
+{
+    "extends": ["eslint:recommended", "plugin:node/recommended", "plugin:prettier/recommended"],
+    "env": {
+        "node": true,
+        "es6": true,
+        "jest": true
+    },
+    "plugins": ["node", "prettier"],
+    "parserOptions": { "ecmaVersion": 2020, "sourceType": "module" }
+}

test/config-lookup/dotfolder-array/dotfolder-array.test.js

@@ -1,21 +1,14 @@
 'use strict';
 const { stat } = require('fs');
-const { resolve, sep } = require('path');
-const { run, extractSummary } = require('../../utils/test-utils');
+const { resolve } = require('path');
+const { run } = require('../../utils/test-utils');
 
 describe('dotfolder array config lookup', () => {
     it('should find a webpack array configuration in a dotfolder', done => {
         const { stdout, stderr } = run(__dirname, [], false);
         expect(stderr).not.toBeUndefined();
         expect(stdout).not.toBeUndefined();
 
-        const summary = extractSummary(stdout);
-        const outputDir = 'config-lookup/dotfolder-array/dist';
-        const outDirectoryFromCompiler = summary['Output Directory'].split(sep);
-        const outDirToMatch = outDirectoryFromCompiler
-            .slice(outDirectoryFromCompiler.length - 3, outDirectoryFromCompiler.length)
-            .join('/');
-        expect(outDirToMatch).toContain(outputDir);
         stat(resolve(__dirname, './dist/dist-commonjs.js'), (err, stats) => {
             expect(err).toBe(null);
             expect(stats.isFile()).toBe(true);

test/config-lookup/dotfolder-single/dotfolder-single.test.js

@@ -3,19 +3,15 @@
 const { stat } = require('fs');
 const { resolve } = require('path');
 
-const { run, extractSummary } = require('../../utils/test-utils');
+const { run } = require('../../utils/test-utils');
 
 describe('dotfolder single config lookup', () => {
     it('should find a webpack configuration in a dotfolder', done => {
         const { stdout, stderr } = run(__dirname, [], false);
         expect(stderr).not.toBeUndefined();
         expect(stdout).not.toBeUndefined();
 
-        const summary = extractSummary(stdout);
-        const outputDir = 'config-lookup/dotfolder-single/dist';
-
-        expect(summary['Output Directory']).toContain(outputDir);
-        expect(stderr).not.toContain('Module not found');
+        expect(stdout).not.toContain('Module not found');
         stat(resolve(__dirname, './dist/main.js'), (err, stats) => {
             expect(err).toBe(null);
             expect(stats.isFile()).toBe(true);