feat(cli): refresh CLI output via commander's help API + shared status icons

.changeset/commander-styled-help.md

@@ -0,0 +1,5 @@
+---
+"webpack-cli": minor
+---
+
+feat(cli): refresh the `--help` output using commander's `configureHelp` API — branded headers, section dividers, colorized terms and a clearer footer. Colors and chrome collapse to plain text when output is piped or `--no-color` is used, so scripts keep working.

test/api/__snapshots__/CLI.test.js.snap.webpack5

@@ -3,29 +3,35 @@
 exports[`CLI API custom help output should display help information 1`] = `
 [
   [
-    "Usage: webpack --mode <value>",
+    "",
   ],
   [
-    "Description: Enable production optimizations or development hints.",
+    "  ⬡ --mode",
   ],
   [
-    "Possible values: 'development' | 'production' | 'none'",
+    "  ────────────────────────────────────────────────────────────────────────",
   ],
   [
-    "",
+    "  Usage: webpack --mode <value>",
+  ],
+  [
+    "  Description: Enable production optimizations or development hints.",
   ],
   [
-    "To see list of all supported commands and options run 'webpack --help=verbose'.
-",
+    "  Possible values: 'development' | 'production' | 'none'",
   ],
   [
-    "Webpack documentation: https://webpack.js.org/.",
+    "  ────────────────────────────────────────────────────────────────────────",
   ],
   [
-    "CLI documentation: https://webpack.js.org/api/cli/.",
+    "",
   ],
   [
-    "Made with ♥ by the webpack team.",
+    "  ℹ Run 'webpack --help=verbose' to see all available commands and options.
+
+  Webpack documentation:  https://webpack.js.org/
+  CLI documentation:      https://webpack.js.org/api/cli/
+  Made with ♥ by the webpack team",
   ],
 ]
 `;

test/build/config/error-array/__snapshots__/config-array-error.test.js.snap.webpack5

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`config with invalid array syntax should throw syntax error and exit with non-zero exit code when even 1 object has syntax error 1`] = `
-"[webpack-cli] Failed to load './webpack.config.js' config
+"[webpack-cli] ✖ Failed to load './webpack.config.js' config
 ▶ ESM (\`import\`) failed:
   <cwd>/test/build/config/error-array/webpack.config.js:8
           target: 'node'; // error eslint-ignore

test/build/config/error-commonjs/__snapshots__/config-error.test.js.snap.webpack5

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`config with errors should throw syntax error and exit with non-zero exit code 1`] = `
-"[webpack-cli] Failed to load '<cwd>/test/build/config/error-commonjs/syntax-error.js' config
+"[webpack-cli] ✖ Failed to load '<cwd>/test/build/config/error-commonjs/syntax-error.js' config
 ▶ ESM (\`import\`) failed:
   <cwd>/test/build/config/error-commonjs/syntax-error.js:4
       target: 'node'; //SyntaxError: <error-message>

test/build/output/__snapshots__/output-named-bundles.test.js.snap.webpack5

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`output flag named bundles should output file in bin directory using default webpack config with warning for empty output value: stderr 1`] = `
-"[webpack-cli] Error: Option '-o, --output-path <value>' argument missing
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Error: Option '-o, --output-path <value>' argument missing
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`output flag named bundles should output file in bin directory using default webpack config with warning for empty output value: stdout 1`] = `""`;

test/build/stats/flags/__snapshots__/stats.test.js.snap.webpack5

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`stats flag should log error when an unknown flag stats value is passed: stderr 1`] = `
-"[webpack-cli] Invalid value 'foo' for the '--stats' option
-[webpack-cli] Expected: 'none | summary | errors-only | errors-warnings | minimal | normal | detailed | verbose'
-[webpack-cli] Invalid value 'foo' for the '--stats' option
-[webpack-cli] Expected: without value or negative option"
+"[webpack-cli] ✖ Invalid value 'foo' for the '--stats' option
+[webpack-cli] ✖ Expected: 'none | summary | errors-only | errors-warnings | minimal | normal | detailed | verbose'
+[webpack-cli] ✖ Invalid value 'foo' for the '--stats' option
+[webpack-cli] ✖ Expected: without value or negative option"
 `;
 
 exports[`stats flag should log error when an unknown flag stats value is passed: stdout 1`] = `""`;

test/build/target/flag-test/__snapshots__/target-flag.test.js.snap.webpack5

@@ -5,7 +5,7 @@ exports[`--target flag should reset the \`target\` option when the \`--target-re
 exports[`--target flag should reset the \`target\` option when the \`--target-reset\` is used: stderr 1`] = `""`;
 
 exports[`--target flag should throw an error for incompatible multiple targets: stderr 1`] = `
-"[webpack-cli] Error: For the selected environment is no default script chunk format available:
+"[webpack-cli] ✖ Error: For the selected environment is no default script chunk format available:
 
 JSONP Array push ('array-push') can be chosen when 'document' or 'importScripts' is available.
 CommonJs exports ('commonjs') can be chosen when 'require' or node builtins are available.
@@ -16,7 +16,7 @@ Select an appropriate 'target' to allow selecting one by default, or specify the
 exports[`--target flag should throw an error for incompatible multiple targets: stdout 1`] = `""`;
 
 exports[`--target flag should throw an error for invalid target in multiple syntax: stderr 1`] = `
-"[webpack-cli] Error: Unknown target 'invalid'. The following targets are supported:
+"[webpack-cli] ✖ Error: Unknown target 'invalid'. The following targets are supported:
 * browserslist / browserslist:env / browserslist:query / browserslist:path-to-config / browserslist:path-to-config:env: Resolve features from browserslist. Will resolve browserslist config automatically. Only browser or node queries are supported (electron is not supported). Examples: 'browserslist:modern' to use 'modern' environment from browserslist config
 * web: Web browser.
 * webworker: Web Worker, SharedWorker or Service Worker.
@@ -30,14 +30,14 @@ exports[`--target flag should throw an error for invalid target in multiple synt
 exports[`--target flag should throw an error for invalid target in multiple syntax: stdout 1`] = `""`;
 
 exports[`--target flag should throw error if target is an empty array: stderr 1`] = `
-"[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
+"[webpack-cli] ✖ Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
  - configuration.target should be a non-empty array."
 `;
 
 exports[`--target flag should throw error if target is an empty array: stdout 1`] = `""`;
 
 exports[`--target flag should throw error with invalid value for --target: stderr 1`] = `
-"[webpack-cli] Error: Unknown target 'invalid'. The following targets are supported:
+"[webpack-cli] ✖ Error: Unknown target 'invalid'. The following targets are supported:
 * browserslist / browserslist:env / browserslist:query / browserslist:path-to-config / browserslist:path-to-config:env: Resolve features from browserslist. Will resolve browserslist config automatically. Only browser or node queries are supported (electron is not supported). Examples: 'browserslist:modern' to use 'modern' environment from browserslist config
 * web: Web browser.
 * webworker: Web Worker, SharedWorker or Service Worker.

test/build/unknown/__snapshots__/unknown.test.js.snap.webpack5

@@ -1,164 +1,164 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`unknown behaviour should log an error if an unknown flag is passed #2: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '-u'
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Error: Unknown option '-u'
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed #2: stdout 1`] = `""`;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed #3: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '-u'
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Error: Unknown option '-u'
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed #3: stdout 1`] = `""`;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed #4: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '-u'
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Error: Unknown option '-u'
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed #4: stdout 1`] = `""`;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed #5: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '-u'
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Error: Unknown option '-u'
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed #5: stdout 1`] = `""`;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed and includes =: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '--unknown=foo'
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Error: Unknown option '--unknown=foo'
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed and includes =: stdout 1`] = `""`;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed and suggests the closest match to an unknown flag #2: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '--output-fileneme'
-[webpack-cli] Did you mean '--output-filename'?
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Error: Unknown option '--output-fileneme'
+[webpack-cli] ✖ Did you mean '--output-filename'?
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed and suggests the closest match to an unknown flag #2: stdout 1`] = `""`;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed and suggests the closest match to an unknown flag #3: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '--output-library-auxiliary-comment-commnjs'
-[webpack-cli] Did you mean '--output-library-auxiliary-comment-commonjs'?
-[webpack-cli] Did you mean '--output-library-auxiliary-comment-commonjs2'?
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Error: Unknown option '--output-library-auxiliary-comment-commnjs'
+[webpack-cli] ✖ Did you mean '--output-library-auxiliary-comment-commonjs'?
+[webpack-cli] ✖ Did you mean '--output-library-auxiliary-comment-commonjs2'?
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed and suggests the closest match to an unknown flag #3: stdout 1`] = `""`;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed and suggests the closest match to an unknown flag using "b" command: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '--entyr'
-[webpack-cli] Did you mean '--entry'?
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Error: Unknown option '--entyr'
+[webpack-cli] ✖ Did you mean '--entry'?
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed and suggests the closest match to an unknown flag using "b" command: stdout 1`] = `""`;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed and suggests the closest match to an unknown flag using "bundle" command: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '--entyr'
-[webpack-cli] Did you mean '--entry'?
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Error: Unknown option '--entyr'
+[webpack-cli] ✖ Did you mean '--entry'?
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed and suggests the closest match to an unknown flag using "bundle" command: stdout 1`] = `""`;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed and suggests the closest match to an unknown flag using "i" command: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '--outpyt'
-[webpack-cli] Did you mean '--output'?
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Error: Unknown option '--outpyt'
+[webpack-cli] ✖ Did you mean '--output'?
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed and suggests the closest match to an unknown flag using "i" command: stdout 1`] = `""`;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed and suggests the closest match to an unknown flag using "info" command: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '--outpyt'
-[webpack-cli] Did you mean '--output'?
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Error: Unknown option '--outpyt'
+[webpack-cli] ✖ Did you mean '--output'?
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed and suggests the closest match to an unknown flag using "info" command: stdout 1`] = `""`;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed and suggests the closest match to an unknown flag: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '--entyr'
-[webpack-cli] Did you mean '--entry'?
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Error: Unknown option '--entyr'
+[webpack-cli] ✖ Did you mean '--entry'?
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed and suggests the closest match to an unknown flag: stdout 1`] = `""`;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed using "b" command: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '--unknown'
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Error: Unknown option '--unknown'
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed using "b" command: stdout 1`] = `""`;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed using "bundle" command #2: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '--unknown'
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Error: Unknown option '--unknown'
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed using "bundle" command #2: stdout 1`] = `""`;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed using "bundle" command: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '--unknown'
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Error: Unknown option '--unknown'
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed using "bundle" command: stdout 1`] = `""`;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed using "i" command: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '--unknown'
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Error: Unknown option '--unknown'
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed using "i" command: stdout 1`] = `""`;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed using "info" command: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '--unknown'
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Error: Unknown option '--unknown'
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed using "info" command: stdout 1`] = `""`;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '--unknown'
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Error: Unknown option '--unknown'
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log an error if an unknown flag is passed: stdout 1`] = `""`;
 
 exports[`unknown behaviour should log error and provide suggestion if an unknown command passed: stderr 1`] = `
-"[webpack-cli] Unknown command or entry 'serverr'
-[webpack-cli] Did you mean 'serve' (alias 'server, s')?
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Unknown command or entry 'serverr'
+[webpack-cli] ✖ Did you mean 'serve' (alias 'server, s')?
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log error and provide suggestion if an unknown command passed: stdout 1`] = `""`;
 
 exports[`unknown behaviour should log error and respect --color flag: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '--unknown'
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Error: Unknown option '--unknown'
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log error and respect --color flag: stdout 1`] = `""`;
 
 exports[`unknown behaviour should log error for unknown flag and respect --no-color: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '--unknown'
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Error: Unknown option '--unknown'
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log error for unknown flag and respect --no-color: stdout 1`] = `""`;
 
 exports[`unknown behaviour should log error if an unknown command passed: stderr 1`] = `
-"[webpack-cli] Unknown command or entry 'qqq'
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] ✖ Unknown command or entry 'qqq'
+[webpack-cli] ✖ Run 'webpack --help' to see available commands and options"
 `;
 
 exports[`unknown behaviour should log error if an unknown command passed: stdout 1`] = `""`;