fix: improve help output for possible values (#4316)

* fix: improve help output for possible values

* test: udpate snaps

packages/webpack-cli/src/webpack-cli.ts

@@ -1646,9 +1646,14 @@ class WebpackCLI implements IWebpackCLI {
           );
 
           if (possibleValues.length > 0) {
-            this.logger.raw(
-              `${bold("Possible values:")} ${JSON.stringify(possibleValues.join(" | "))}`,
-            );
+            // Convert the possible values to a union type string
+            // ['mode', 'development', 'production'] => "'mode' | 'development' | 'production'"
+            // [false, 'eval'] => "false | 'eval'"
+            const possibleValuesUnionTypeString = possibleValues
+              .map((value) => (typeof value === "string" ? `'${value}'` : value))
+              .join(" | ");
+
+            this.logger.raw(`${bold("Possible values:")} ${possibleValuesUnionTypeString}`);
           }
         }
 

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

@@ -9,7 +9,7 @@ exports[`CLI API custom help output should display help information 1`] = `
     "Description: Enable production optimizations or development hints.",
   ],
   [
-    "Possible values: "development | production | none"",
+    "Possible values: 'development' | 'production' | 'none'",
   ],
   [
     "",

test/help/__snapshots__/help.test.js.snap.devServer5.webpack5

@@ -1207,7 +1207,7 @@ exports[`help should show help information using the "help --cache-type" option:
 exports[`help should show help information using the "help --cache-type" option: stdout 1`] = `
 "Usage: webpack --cache-type <value>
 Description: In memory caching. Filesystem caching.
-Possible values: "memory | filesystem"
+Possible values: 'memory' | 'filesystem'
 
 To see list of all supported commands and options run 'webpack --help=verbose'.
 
@@ -1234,7 +1234,7 @@ exports[`help should show help information using the "help --mode" option: stder
 exports[`help should show help information using the "help --mode" option: stdout 1`] = `
 "Usage: webpack --mode <value>
 Description: Enable production optimizations or development hints.
-Possible values: "development | production | none"
+Possible values: 'development' | 'production' | 'none'
 
 To see list of all supported commands and options run 'webpack --help=verbose'.
 
@@ -1269,12 +1269,26 @@ CLI documentation: https://webpack.js.org/api/cli/.
 Made with ♥ by the webpack team."
 `;
 
+exports[`help should show help information using the "help --output-chunk-format" option: stderr 1`] = `""`;
+
+exports[`help should show help information using the "help --output-chunk-format" option: stdout 1`] = `
+"Usage: webpack --output-chunk-format <value>
+Description: The format of chunks (formats included by default are 'array-push' (web/WebWorker), 'commonjs' (node.js), 'module' (ESM), but others might be added by plugins).
+Possible values: 'array-push' | 'commonjs' | 'module' | false
+
+To see list of all supported commands and options run 'webpack --help=verbose'.
+
+Webpack documentation: https://webpack.js.org/.
+CLI documentation: https://webpack.js.org/api/cli/.
+Made with ♥ by the webpack team."
+`;
+
 exports[`help should show help information using the "help --stats" option: stderr 1`] = `""`;
 
 exports[`help should show help information using the "help --stats" option: stdout 1`] = `
 "Usage: webpack --stats [value]
 Description: Stats options object or preset name.
-Possible values: "none | summary | errors-only | errors-warnings | minimal | normal | detailed | verbose"
+Possible values: 'none' | 'summary' | 'errors-only' | 'errors-warnings' | 'minimal' | 'normal' | 'detailed' | 'verbose'
 
 To see list of all supported commands and options run 'webpack --help=verbose'.
 
@@ -1289,7 +1303,7 @@ exports[`help should show help information using the "help --target" option: std
 "Usage: webpack --target <value...>
 Short: webpack -t <value...>
 Description: Environment to build for. Environment to build for. An array of environments to build for all of them when possible.
-Possible values: "false"
+Possible values: false
 
 To see list of all supported commands and options run 'webpack --help=verbose'.
 
@@ -1344,7 +1358,7 @@ exports[`help should show help information using the "help serve --mode" option:
 exports[`help should show help information using the "help serve --mode" option: stdout 1`] = `
 "Usage: webpack serve --mode <value>
 Description: Enable production optimizations or development hints.
-Possible values: "development | production | none"
+Possible values: 'development' | 'production' | 'none'
 
 To see list of all supported commands and options run 'webpack --help=verbose'.
 

test/help/help.test.js

@@ -243,6 +243,14 @@ describe("help", () => {
     expect(normalizeStdout(stdout)).toMatchSnapshot("stdout");
   });
 
+  it('should show help information using the "help --output-chunk-format" option', async () => {
+    const { exitCode, stderr, stdout } = await run(__dirname, ["help", "--output-chunk-format"]);
+
+    expect(exitCode).toBe(0);
+    expect(normalizeStderr(stderr)).toMatchSnapshot("stderr");
+    expect(normalizeStdout(stdout)).toMatchSnapshot("stdout");
+  });
+
   it('should show help information using the "help --no-stats" option', async () => {
     const { exitCode, stderr, stdout } = await run(__dirname, ["help", "--no-stats"]);