From a297ae3f3896ae9b69656698e478fa4e98b76221 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 17 Jun 2026 16:00:52 +0000 Subject: [PATCH 1/5] feat(cli): restyle help output via commander's configureHelp API MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Refresh the `--help`, command help and single-option help screens with a branded header (⬡ webpack ), section dividers, colorized terms and a clearer footer, implemented through commander's `configureHelp`/`formatHelp` API rather than a separate renderer. Because `helper.formatItem` pads using the visible (ANSI-stripped) width, terms can be colorized while keeping descriptions aligned. All colors and chrome collapse to plain text when output is piped or `--no-color` is set, so scripts that parse the output keep working. Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_012j95RhPtEkRKfzDM4JEhdS --- .changeset/commander-styled-help.md | 5 + packages/webpack-cli/src/webpack-cli.ts | 144 +- .../__snapshots__/CLI.test.js.snap.webpack5 | 30 +- .../help.test.js.snap.devServer5.webpack5 | 1412 +++++++++++------ 4 files changed, 1004 insertions(+), 587 deletions(-) create mode 100644 .changeset/commander-styled-help.md diff --git a/.changeset/commander-styled-help.md b/.changeset/commander-styled-help.md new file mode 100644 index 00000000000..f998f54e4c0 --- /dev/null +++ b/.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. diff --git a/packages/webpack-cli/src/webpack-cli.ts b/packages/webpack-cli/src/webpack-cli.ts index cae7d415df2..82076846eb5 100644 --- a/packages/webpack-cli/src/webpack-cli.ts +++ b/packages/webpack-cli/src/webpack-cli.ts @@ -1361,7 +1361,17 @@ class WebpackCLI { value === "--version" || value === "-h" || value === "--help"; - const { bold } = this.colors; + const { bold, cyan, blue, red } = this.colors; + // Shared "chrome" used to render the help screens. These are purely visual: + // colors collapse to plain strings when colors are disabled (e.g. piped output + // or `--no-color`), so the textual structure stays stable for scripts. + const INDENT = " "; + const DIVIDER_WIDTH = 72; + const divider = `${INDENT}${blue("─".repeat(DIVIDER_WIDTH))}`; + // The hexagon mirrors the webpack logo and brands every help/info screen. + const header = (title: string) => `${INDENT}${bold(cyan("⬡"))} ${bold(title)}`; + // Section headings ("Options", "Commands", …) get a colored title and an underline. + const sectionTitle = (title: string) => `${INDENT}${bold(cyan(title))}\n${divider}`; const outputIncorrectUsageOfHelp = () => { this.logger.error("Incorrect use of help"); this.logger.error( @@ -1390,7 +1400,7 @@ class WebpackCLI { } if (isGlobalHelp) { - return `${parentCmdNames}${command.usage()}\n${bold( + return `${parentCmdNames}${command.usage()}\n${INDENT}${bold( "Alternative usage to run commands:", )} ${parentCmdNames}[command] [options]`; } @@ -1435,18 +1445,32 @@ class WebpackCLI { ); }, formatHelp: (command, helper: Help) => { + // `helper.formatItem` is ANSI-aware (it pads using the visible width), so we + // can colorize the term and keep every description column aligned. const formatItem = (term: string, description: string) => { if (description) { - return helper.formatItem(term, helper.padWidth(command, helper), description, helper); + return helper.formatItem( + cyan(term), + helper.padWidth(command, helper), + description, + helper, + ); } - return term; + return `${INDENT}${cyan(term)}`; }; - const formatList = (textArray: string[]) => textArray.join("\n").replaceAll(/^/gm, ""); + const formatList = (textArray: string[]) => textArray.join("\n"); - // Usage - let output = [`${bold("Usage:")} ${helper.commandUsage(command)}`, ""]; + const addSection = (output: string[], title: string, items: string[]) => + items.length > 0 ? [...output, sectionTitle(title), formatList(items), ""] : output; + + // Header — a branded, divided title for the screen. + let output = [ + "", + header(isGlobalHelp ? "webpack" : `webpack ${command.name()}`), + divider, + ]; // Description const commandDescription = isGlobalHelp @@ -1454,50 +1478,56 @@ class WebpackCLI { : helper.commandDescription(command); if (commandDescription.length > 0) { - output = [...output, commandDescription, ""]; + output = [...output, `${INDENT}${commandDescription}`, ""]; } - // Arguments - const argumentList = helper - .visibleArguments(command) - .map((argument) => formatItem(argument.name(), argument.description)); + // Usage + output = [...output, `${INDENT}${bold("Usage:")} ${helper.commandUsage(command)}`, ""]; - if (argumentList.length > 0) { - output = [...output, bold("Arguments:"), formatList(argumentList), ""]; - } + // Arguments + output = addSection( + output, + "Arguments", + helper + .visibleArguments(command) + .map((argument) => formatItem(argument.name(), argument.description)), + ); // Options - const optionList = helper - .visibleOptions(command) - .map((option) => - formatItem(helper.optionTerm(option), helper.optionDescription(option)), - ); - - if (optionList.length > 0) { - output = [...output, bold("Options:"), formatList(optionList), ""]; - } + output = addSection( + output, + "Options", + helper + .visibleOptions(command) + .map((option) => + formatItem(helper.optionTerm(option), helper.optionDescription(option)), + ), + ); // Global options - const globalOptionList = program.options.map((option) => - formatItem(helper.optionTerm(option), helper.optionDescription(option)), + output = addSection( + output, + "Global options", + program.options.map((option) => + formatItem(helper.optionTerm(option), helper.optionDescription(option)), + ), ); - if (globalOptionList.length > 0) { - output = [...output, bold("Global options:"), formatList(globalOptionList), ""]; - } - // Commands - const commandList = helper - .visibleCommands(isGlobalHelp ? program : command) - .map((command) => - formatItem(helper.subcommandTerm(command), helper.subcommandDescription(command)), - ); - - if (commandList.length > 0) { - output = [...output, bold("Commands:"), formatList(commandList), ""]; - } + output = addSection( + output, + "Commands", + helper + .visibleCommands(isGlobalHelp ? program : command) + .map((subcommand) => + formatItem( + helper.subcommandTerm(subcommand), + helper.subcommandDescription(subcommand), + ), + ), + ); - return output.join("\n"); + return [...output, divider].join("\n"); }, }); @@ -1569,23 +1599,23 @@ class WebpackCLI { option.flags.replace(/^.+[[<]/, "").replace(/(\.\.\.)?[\]>].*$/, "") + (option.variadic === true ? "..." : ""); const value = option.required ? `<${nameOutput}>` : option.optional ? `[${nameOutput}]` : ""; + const scope = isCommandSpecified ? ` ${commandName}` : ""; + this.logger.raw(""); + this.logger.raw(header(option.long ?? optionName)); + this.logger.raw(divider); this.logger.raw( - `${bold("Usage")}: webpack${isCommandSpecified ? ` ${commandName}` : ""} ${option.long}${ - value ? ` ${value}` : "" - }`, + `${INDENT}${bold("Usage:")} webpack${scope} ${option.long}${value ? ` ${value}` : ""}`, ); if (option.short) { this.logger.raw( - `${bold("Short:")} webpack${isCommandSpecified ? ` ${commandName}` : ""} ${ - option.short - }${value ? ` ${value}` : ""}`, + `${INDENT}${bold("Short:")} webpack${scope} ${option.short}${value ? ` ${value}` : ""}`, ); } if (option.description) { - this.logger.raw(`${bold("Description:")} ${option.description}`); + this.logger.raw(`${INDENT}${bold("Description:")} ${option.description}`); } const { configs } = option as Option & { configs?: ArgumentConfig[] }; @@ -1607,10 +1637,11 @@ class WebpackCLI { .map((value) => (typeof value === "string" ? `'${value}'` : value)) .join(" | "); - this.logger.raw(`${bold("Possible values:")} ${possibleValuesUnionTypeString}`); + this.logger.raw(`${INDENT}${bold("Possible values:")} ${possibleValuesUnionTypeString}`); } } + this.logger.raw(divider); this.logger.raw(""); // TODO implement this after refactor cli arguments @@ -1619,12 +1650,21 @@ class WebpackCLI { outputIncorrectUsageOfHelp(); } + // Footer — shared across every help screen. + if (!isVerbose) { + this.logger.raw( + `${INDENT}${cyan("ℹ")} Run ${bold("'webpack --help=verbose'")} to see all available commands and options.`, + ); + } + + this.logger.raw(""); + this.logger.raw( + `${INDENT}${bold("Webpack documentation:")} ${cyan("https://webpack.js.org/")}`, + ); this.logger.raw( - "To see list of all supported commands and options run 'webpack --help=verbose'.\n", + `${INDENT}${bold("CLI documentation:")} ${cyan("https://webpack.js.org/api/cli/")}`, ); - this.logger.raw(`${bold("Webpack documentation:")} https://webpack.js.org/.`); - this.logger.raw(`${bold("CLI documentation:")} https://webpack.js.org/api/cli/.`); - this.logger.raw(`${bold("Made with ♥ by the webpack team")}.`); + this.logger.raw(`${INDENT}${bold("Made with")} ${red("♥")} ${bold("by the webpack team")}`); process.exit(0); } diff --git a/test/api/__snapshots__/CLI.test.js.snap.webpack5 b/test/api/__snapshots__/CLI.test.js.snap.webpack5 index 1416f8f80b0..84299788c61 100644 --- a/test/api/__snapshots__/CLI.test.js.snap.webpack5 +++ b/test/api/__snapshots__/CLI.test.js.snap.webpack5 @@ -3,29 +3,43 @@ exports[`CLI API custom help output should display help information 1`] = ` [ [ - "Usage: webpack --mode ", + "", + ], + [ + " ⬡ --mode", + ], + [ + " ────────────────────────────────────────────────────────────────────────", + ], + [ + " Usage: webpack --mode ", + ], + [ + " Description: Enable production optimizations or development hints.", ], [ - "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'. -", + " ℹ Run 'webpack --help=verbose' to see all available commands and options.", + ], + [ + "", ], [ - "Webpack documentation: https://webpack.js.org/.", + " Webpack documentation: https://webpack.js.org/", ], [ - "CLI documentation: https://webpack.js.org/api/cli/.", + " CLI documentation: https://webpack.js.org/api/cli/", ], [ - "Made with ♥ by the webpack team.", + " Made with ♥ by the webpack team", ], ] `; diff --git a/test/help/__snapshots__/help.test.js.snap.devServer5.webpack5 b/test/help/__snapshots__/help.test.js.snap.devServer5.webpack5 index 3449b88e5e7..2b7123476c6 100644 --- a/test/help/__snapshots__/help.test.js.snap.devServer5.webpack5 +++ b/test/help/__snapshots__/help.test.js.snap.devServer5.webpack5 @@ -93,12 +93,16 @@ exports[`help should log error for unknown option using command syntax #4: stdou exports[`help should show help information and respect the "--color" flag using the "--help" option: stderr 1`] = `""`; exports[`help should show help information and respect the "--color" flag using the "--help" option: stdout 1`] = ` -"Usage: webpack [entries...] [options] -Alternative usage to run commands: webpack [command] [options] +" + ⬡ webpack + ──────────────────────────────────────────────────────────────────────── + The build tool for modern web applications. -The build tool for modern web applications. + Usage: webpack [entries...] [options] + Alternative usage to run commands: webpack [command] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -121,13 +125,15 @@ Options: -w, --watch Enter watch mode, which rebuilds on file change. --watch-options-stdin Stop watching when stdin stream has ended. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -Commands: + Commands + ──────────────────────────────────────────────────────────────────────── build|bundle|b [entries...] [options] Run webpack (default command, can be omitted). configtest|t [config-path] Validate a webpack configuration. help|h [command] [option] Display help for commands and options. @@ -136,22 +142,27 @@ Commands: version|v [options] Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. watch|w [entries...] [options] Run webpack and watch for files changes. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 and respect the "--no-color" flag using the "--help" option: stderr 1`] = `""`; exports[`help should show help information and respect the "--no-color" flag using the "--help" option: stdout 1`] = ` -"Usage: webpack [entries...] [options] -Alternative usage to run commands: webpack [command] [options] +" + ⬡ webpack + ──────────────────────────────────────────────────────────────────────── + The build tool for modern web applications. -The build tool for modern web applications. + Usage: webpack [entries...] [options] + Alternative usage to run commands: webpack [command] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -174,13 +185,15 @@ Options: -w, --watch Enter watch mode, which rebuilds on file change. --watch-options-stdin Stop watching when stdin stream has ended. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -Commands: + Commands + ──────────────────────────────────────────────────────────────────────── build|bundle|b [entries...] [options] Run webpack (default command, can be omitted). configtest|t [config-path] Validate a webpack configuration. help|h [command] [option] Display help for commands and options. @@ -189,22 +202,27 @@ Commands: version|v [options] Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. watch|w [entries...] [options] Run webpack and watch for files changes. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 and taking precedence when "--help" and "--version" option using together: stderr 1`] = `""`; exports[`help should show help information and taking precedence when "--help" and "--version" option using together: stdout 1`] = ` -"Usage: webpack [entries...] [options] -Alternative usage to run commands: webpack [command] [options] +" + ⬡ webpack + ──────────────────────────────────────────────────────────────────────── + The build tool for modern web applications. -The build tool for modern web applications. + Usage: webpack [entries...] [options] + Alternative usage to run commands: webpack [command] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -227,13 +245,15 @@ Options: -w, --watch Enter watch mode, which rebuilds on file change. --watch-options-stdin Stop watching when stdin stream has ended. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -Commands: + Commands + ──────────────────────────────────────────────────────────────────────── build|bundle|b [entries...] [options] Run webpack (default command, can be omitted). configtest|t [config-path] Validate a webpack configuration. help|h [command] [option] Display help for commands and options. @@ -242,21 +262,26 @@ Commands: version|v [options] Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. watch|w [entries...] [options] Run webpack and watch for files changes. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'b' command using command syntax: stderr 1`] = `""`; exports[`help should show help information for 'b' command using command syntax: stdout 1`] = ` -"Usage: webpack build|bundle|b [entries...] [options] +" + ⬡ webpack build + ──────────────────────────────────────────────────────────────────────── + Run webpack (default command, can be omitted). -Run webpack (default command, can be omitted). + Usage: webpack build|bundle|b [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -279,27 +304,33 @@ Options: -w, --watch Enter watch mode, which rebuilds on file change. --watch-options-stdin Stop watching when stdin stream has ended. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'b' command using the "--help verbose" option: stderr 1`] = `""`; exports[`help should show help information for 'b' command using the "--help verbose" option: stdout 1`] = ` -"Usage: webpack build|bundle|b [entries...] [options] +" + ⬡ webpack build + ──────────────────────────────────────────────────────────────────────── + Run webpack (default command, can be omitted). -Run webpack (default command, can be omitted). + Usage: webpack build|bundle|b [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -324,27 +355,32 @@ Options: --watch-options-stdin Stop watching when stdin stream has ended. --no-watch-options-stdin Negative 'watch-options-stdin' option. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -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." + 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 for 'b' command using the "--help" option: stderr 1`] = `""`; exports[`help should show help information for 'b' command using the "--help" option: stdout 1`] = ` -"Usage: webpack build|bundle|b [entries...] [options] +" + ⬡ webpack build + ──────────────────────────────────────────────────────────────────────── + Run webpack (default command, can be omitted). -Run webpack (default command, can be omitted). + Usage: webpack build|bundle|b [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -367,27 +403,33 @@ Options: -w, --watch Enter watch mode, which rebuilds on file change. --watch-options-stdin Stop watching when stdin stream has ended. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'build' and respect the "--color" flag using the "--help" option: stderr 1`] = `""`; exports[`help should show help information for 'build' and respect the "--color" flag using the "--help" option: stdout 1`] = ` -"Usage: webpack build|bundle|b [entries...] [options] +" + ⬡ webpack build + ──────────────────────────────────────────────────────────────────────── + Run webpack (default command, can be omitted). -Run webpack (default command, can be omitted). + Usage: webpack build|bundle|b [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -410,27 +452,33 @@ Options: -w, --watch Enter watch mode, which rebuilds on file change. --watch-options-stdin Stop watching when stdin stream has ended. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'build' and respect the "--no-color" flag using the "--help" option: stderr 1`] = `""`; exports[`help should show help information for 'build' and respect the "--no-color" flag using the "--help" option: stdout 1`] = ` -"Usage: webpack build|bundle|b [entries...] [options] +" + ⬡ webpack build + ──────────────────────────────────────────────────────────────────────── + Run webpack (default command, can be omitted). -Run webpack (default command, can be omitted). + Usage: webpack build|bundle|b [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -453,27 +501,33 @@ Options: -w, --watch Enter watch mode, which rebuilds on file change. --watch-options-stdin Stop watching when stdin stream has ended. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'build' command using command syntax: stderr 1`] = `""`; exports[`help should show help information for 'build' command using command syntax: stdout 1`] = ` -"Usage: webpack build|bundle|b [entries...] [options] +" + ⬡ webpack build + ──────────────────────────────────────────────────────────────────────── + Run webpack (default command, can be omitted). -Run webpack (default command, can be omitted). + Usage: webpack build|bundle|b [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -496,27 +550,33 @@ Options: -w, --watch Enter watch mode, which rebuilds on file change. --watch-options-stdin Stop watching when stdin stream has ended. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'build' command using the "--help verbose" option: stderr 1`] = `""`; exports[`help should show help information for 'build' command using the "--help verbose" option: stdout 1`] = ` -"Usage: webpack build|bundle|b [entries...] [options] +" + ⬡ webpack build + ──────────────────────────────────────────────────────────────────────── + Run webpack (default command, can be omitted). -Run webpack (default command, can be omitted). + Usage: webpack build|bundle|b [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -541,27 +601,32 @@ Options: --watch-options-stdin Stop watching when stdin stream has ended. --no-watch-options-stdin Negative 'watch-options-stdin' option. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -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." + 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 for 'build' command using the "--help" option: stderr 1`] = `""`; exports[`help should show help information for 'build' command using the "--help" option: stdout 1`] = ` -"Usage: webpack build|bundle|b [entries...] [options] +" + ⬡ webpack build + ──────────────────────────────────────────────────────────────────────── + Run webpack (default command, can be omitted). -Run webpack (default command, can be omitted). + Usage: webpack build|bundle|b [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -584,319 +649,395 @@ Options: -w, --watch Enter watch mode, which rebuilds on file change. --watch-options-stdin Stop watching when stdin stream has ended. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'configtest' and respect the "--color" flag using the "--help" option: stderr 1`] = `""`; exports[`help should show help information for 'configtest' and respect the "--color" flag using the "--help" option: stdout 1`] = ` -"Usage: webpack configtest|t [config-path] +" + ⬡ webpack configtest + ──────────────────────────────────────────────────────────────────────── + Validate a webpack configuration. -Validate a webpack configuration. + Usage: webpack configtest|t [config-path] -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'configtest' and respect the "--no-color" flag using the "--help" option: stderr 1`] = `""`; exports[`help should show help information for 'configtest' and respect the "--no-color" flag using the "--help" option: stdout 1`] = ` -"Usage: webpack configtest|t [config-path] +" + ⬡ webpack configtest + ──────────────────────────────────────────────────────────────────────── + Validate a webpack configuration. -Validate a webpack configuration. + Usage: webpack configtest|t [config-path] -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'configtest' command using command syntax: stderr 1`] = `""`; exports[`help should show help information for 'configtest' command using command syntax: stdout 1`] = ` -"Usage: webpack configtest|t [config-path] +" + ⬡ webpack configtest + ──────────────────────────────────────────────────────────────────────── + Validate a webpack configuration. -Validate a webpack configuration. + Usage: webpack configtest|t [config-path] -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'configtest' command using the "--help verbose" option: stderr 1`] = `""`; exports[`help should show help information for 'configtest' command using the "--help verbose" option: stdout 1`] = ` -"Usage: webpack configtest|t [config-path] +" + ⬡ webpack configtest + ──────────────────────────────────────────────────────────────────────── + Validate a webpack configuration. -Validate a webpack configuration. + Usage: webpack configtest|t [config-path] -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -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." + 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 for 'configtest' command using the "--help" option: stderr 1`] = `""`; exports[`help should show help information for 'configtest' command using the "--help" option: stdout 1`] = ` -"Usage: webpack configtest|t [config-path] +" + ⬡ webpack configtest + ──────────────────────────────────────────────────────────────────────── + Validate a webpack configuration. -Validate a webpack configuration. + Usage: webpack configtest|t [config-path] -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'i' command using command syntax: stderr 1`] = `""`; exports[`help should show help information for 'i' command using command syntax: stdout 1`] = ` -"Usage: webpack info|i [options] +" + ⬡ webpack info + ──────────────────────────────────────────────────────────────────────── + Outputs information about your system. -Outputs information about your system. + Usage: webpack info|i [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -o, --output To get the output in a specified format (accept json or markdown) -a, --additional-package Adds additional packages to the output -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'i' command using the "--help verbose" option: stderr 1`] = `""`; exports[`help should show help information for 'i' command using the "--help verbose" option: stdout 1`] = ` -"Usage: webpack info|i [options] +" + ⬡ webpack info + ──────────────────────────────────────────────────────────────────────── + Outputs information about your system. -Outputs information about your system. + Usage: webpack info|i [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -o, --output To get the output in a specified format (accept json or markdown) -a, --additional-package Adds additional packages to the output -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -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." + 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 for 'i' command using the "--help" option: stderr 1`] = `""`; exports[`help should show help information for 'i' command using the "--help" option: stdout 1`] = ` -"Usage: webpack info|i [options] +" + ⬡ webpack info + ──────────────────────────────────────────────────────────────────────── + Outputs information about your system. -Outputs information about your system. + Usage: webpack info|i [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -o, --output To get the output in a specified format (accept json or markdown) -a, --additional-package Adds additional packages to the output -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'info' and respect the "--color" flag using the "--help" option: stderr 1`] = `""`; exports[`help should show help information for 'info' and respect the "--color" flag using the "--help" option: stdout 1`] = ` -"Usage: webpack info|i [options] +" + ⬡ webpack info + ──────────────────────────────────────────────────────────────────────── + Outputs information about your system. -Outputs information about your system. + Usage: webpack info|i [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -o, --output To get the output in a specified format (accept json or markdown) -a, --additional-package Adds additional packages to the output -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'info' and respect the "--no-color" flag using the "--help" option: stderr 1`] = `""`; exports[`help should show help information for 'info' and respect the "--no-color" flag using the "--help" option: stdout 1`] = ` -"Usage: webpack info|i [options] +" + ⬡ webpack info + ──────────────────────────────────────────────────────────────────────── + Outputs information about your system. -Outputs information about your system. + Usage: webpack info|i [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -o, --output To get the output in a specified format (accept json or markdown) -a, --additional-package Adds additional packages to the output -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'info' command using command syntax: stderr 1`] = `""`; exports[`help should show help information for 'info' command using command syntax: stdout 1`] = ` -"Usage: webpack info|i [options] +" + ⬡ webpack info + ──────────────────────────────────────────────────────────────────────── + Outputs information about your system. -Outputs information about your system. + Usage: webpack info|i [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -o, --output To get the output in a specified format (accept json or markdown) -a, --additional-package Adds additional packages to the output -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'info' command using the "--help verbose" option: stderr 1`] = `""`; exports[`help should show help information for 'info' command using the "--help verbose" option: stdout 1`] = ` -"Usage: webpack info|i [options] +" + ⬡ webpack info + ──────────────────────────────────────────────────────────────────────── + Outputs information about your system. -Outputs information about your system. + Usage: webpack info|i [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -o, --output To get the output in a specified format (accept json or markdown) -a, --additional-package Adds additional packages to the output -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -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." + 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 for 'info' command using the "--help" option: stderr 1`] = `""`; exports[`help should show help information for 'info' command using the "--help" option: stdout 1`] = ` -"Usage: webpack info|i [options] +" + ⬡ webpack info + ──────────────────────────────────────────────────────────────────────── + Outputs information about your system. -Outputs information about your system. + Usage: webpack info|i [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -o, --output To get the output in a specified format (accept json or markdown) -a, --additional-package Adds additional packages to the output -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 's' command using command syntax: stderr 1`] = `""`; exports[`help should show help information for 's' command using command syntax: stdout 1`] = ` -"Usage: webpack serve|server|s [entries...] [options] +" + ⬡ webpack serve + ──────────────────────────────────────────────────────────────────────── + Run the webpack dev server and watch for source file changes while serving. -Run the webpack dev server and watch for source file changes while serving. + Usage: webpack serve|server|s [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -992,27 +1133,33 @@ Options: --no-web-socket-server Disallows to set web socket server and options. --web-socket-server-type Allows to set web socket server and options (by default 'ws'). -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 's' command using the "--help verbose" option: stderr 1`] = `""`; exports[`help should show help information for 's' command using the "--help verbose" option: stdout 1`] = ` -"Usage: webpack serve|server|s [entries...] [options] +" + ⬡ webpack serve + ──────────────────────────────────────────────────────────────────────── + Run the webpack dev server and watch for source file changes while serving. -Run the webpack dev server and watch for source file changes while serving. + Usage: webpack serve|server|s [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -1033,27 +1180,32 @@ Options: --cache-max-generations Number of generations unused cache entries stay in memory cache at stack. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -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." + 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 for 's' command using the "--help" option: stderr 1`] = `""`; exports[`help should show help information for 's' command using the "--help" option: stdout 1`] = ` -"Usage: webpack serve|server|s [entries...] [options] +" + ⬡ webpack serve + ──────────────────────────────────────────────────────────────────────── + Run the webpack dev server and watch for source file changes while serving. -Run the webpack dev server and watch for source file changes while serving. + Usage: webpack serve|server|s [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -1149,27 +1301,33 @@ Options: --no-web-socket-server Disallows to set web socket server and options. --web-socket-server-type Allows to set web socket server and options (by default 'ws'). -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'serve' and respect the "--color" flag using the "--help" option: stderr 1`] = `""`; exports[`help should show help information for 'serve' and respect the "--color" flag using the "--help" option: stdout 1`] = ` -"Usage: webpack serve|server|s [entries...] [options] +" + ⬡ webpack serve + ──────────────────────────────────────────────────────────────────────── + Run the webpack dev server and watch for source file changes while serving. -Run the webpack dev server and watch for source file changes while serving. + Usage: webpack serve|server|s [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -1265,27 +1423,33 @@ Options: --no-web-socket-server Disallows to set web socket server and options. --web-socket-server-type Allows to set web socket server and options (by default 'ws'). -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'serve' and respect the "--no-color" flag using the "--help" option: stderr 1`] = `""`; exports[`help should show help information for 'serve' and respect the "--no-color" flag using the "--help" option: stdout 1`] = ` -"Usage: webpack serve|server|s [entries...] [options] +" + ⬡ webpack serve + ──────────────────────────────────────────────────────────────────────── + Run the webpack dev server and watch for source file changes while serving. -Run the webpack dev server and watch for source file changes while serving. + Usage: webpack serve|server|s [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -1381,27 +1545,33 @@ Options: --no-web-socket-server Disallows to set web socket server and options. --web-socket-server-type Allows to set web socket server and options (by default 'ws'). -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'serve' command using command syntax: stderr 1`] = `""`; exports[`help should show help information for 'serve' command using command syntax: stdout 1`] = ` -"Usage: webpack serve|server|s [entries...] [options] +" + ⬡ webpack serve + ──────────────────────────────────────────────────────────────────────── + Run the webpack dev server and watch for source file changes while serving. -Run the webpack dev server and watch for source file changes while serving. + Usage: webpack serve|server|s [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -1497,27 +1667,33 @@ Options: --no-web-socket-server Disallows to set web socket server and options. --web-socket-server-type Allows to set web socket server and options (by default 'ws'). -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'serve' command using the "--help verbose" option: stderr 1`] = `""`; exports[`help should show help information for 'serve' command using the "--help verbose" option: stdout 1`] = ` -"Usage: webpack serve|server|s [entries...] [options] +" + ⬡ webpack serve + ──────────────────────────────────────────────────────────────────────── + Run the webpack dev server and watch for source file changes while serving. -Run the webpack dev server and watch for source file changes while serving. + Usage: webpack serve|server|s [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -1538,27 +1714,32 @@ Options: --cache-max-generations Number of generations unused cache entries stay in memory cache at stack. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -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." + 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 for 'serve' command using the "--help" option: stderr 1`] = `""`; exports[`help should show help information for 'serve' command using the "--help" option: stdout 1`] = ` -"Usage: webpack serve|server|s [entries...] [options] +" + ⬡ webpack serve + ──────────────────────────────────────────────────────────────────────── + Run the webpack dev server and watch for source file changes while serving. -Run the webpack dev server and watch for source file changes while serving. + Usage: webpack serve|server|s [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -1654,27 +1835,33 @@ Options: --no-web-socket-server Disallows to set web socket server and options. --web-socket-server-type Allows to set web socket server and options (by default 'ws'). -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'server' command using command syntax: stderr 1`] = `""`; exports[`help should show help information for 'server' command using command syntax: stdout 1`] = ` -"Usage: webpack serve|server|s [entries...] [options] +" + ⬡ webpack serve + ──────────────────────────────────────────────────────────────────────── + Run the webpack dev server and watch for source file changes while serving. -Run the webpack dev server and watch for source file changes while serving. + Usage: webpack serve|server|s [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -1770,27 +1957,33 @@ Options: --no-web-socket-server Disallows to set web socket server and options. --web-socket-server-type Allows to set web socket server and options (by default 'ws'). -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'server' command using the "--help verbose" option: stderr 1`] = `""`; exports[`help should show help information for 'server' command using the "--help verbose" option: stdout 1`] = ` -"Usage: webpack serve|server|s [entries...] [options] +" + ⬡ webpack serve + ──────────────────────────────────────────────────────────────────────── + Run the webpack dev server and watch for source file changes while serving. -Run the webpack dev server and watch for source file changes while serving. + Usage: webpack serve|server|s [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -1811,27 +2004,32 @@ Options: --cache-max-generations Number of generations unused cache entries stay in memory cache at stack. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -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." + 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 for 'server' command using the "--help" option: stderr 1`] = `""`; exports[`help should show help information for 'server' command using the "--help" option: stdout 1`] = ` -"Usage: webpack serve|server|s [entries...] [options] +" + ⬡ webpack serve + ──────────────────────────────────────────────────────────────────────── + Run the webpack dev server and watch for source file changes while serving. -Run the webpack dev server and watch for source file changes while serving. + Usage: webpack serve|server|s [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -1927,87 +2125,107 @@ Options: --no-web-socket-server Disallows to set web socket server and options. --web-socket-server-type Allows to set web socket server and options (by default 'ws'). -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 't' command using command syntax: stderr 1`] = `""`; exports[`help should show help information for 't' command using command syntax: stdout 1`] = ` -"Usage: webpack configtest|t [config-path] +" + ⬡ webpack configtest + ──────────────────────────────────────────────────────────────────────── + Validate a webpack configuration. -Validate a webpack configuration. + Usage: webpack configtest|t [config-path] -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 't' command using the "--help verbose" option: stderr 1`] = `""`; exports[`help should show help information for 't' command using the "--help verbose" option: stdout 1`] = ` -"Usage: webpack configtest|t [config-path] +" + ⬡ webpack configtest + ──────────────────────────────────────────────────────────────────────── + Validate a webpack configuration. -Validate a webpack configuration. + Usage: webpack configtest|t [config-path] -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -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." + 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 for 't' command using the "--help" option: stderr 1`] = `""`; exports[`help should show help information for 't' command using the "--help" option: stdout 1`] = ` -"Usage: webpack configtest|t [config-path] +" + ⬡ webpack configtest + ──────────────────────────────────────────────────────────────────────── + Validate a webpack configuration. -Validate a webpack configuration. + Usage: webpack configtest|t [config-path] -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'w' command using command syntax: stderr 1`] = `""`; exports[`help should show help information for 'w' command using command syntax: stdout 1`] = ` -"Usage: webpack watch|w [entries...] [options] +" + ⬡ webpack watch + ──────────────────────────────────────────────────────────────────────── + Run webpack and watch for files changes. -Run webpack and watch for files changes. + Usage: webpack watch|w [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -2029,27 +2247,33 @@ Options: -t, --target Specific environment, runtime, or syntax. Environment to build for. An array of environments to build for all of them when possible. --watch-options-stdin Stop watching when stdin stream has ended. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'w' command using the "--help verbose" option: stderr 1`] = `""`; exports[`help should show help information for 'w' command using the "--help verbose" option: stdout 1`] = ` -"Usage: webpack watch|w [entries...] [options] +" + ⬡ webpack watch + ──────────────────────────────────────────────────────────────────────── + Run webpack and watch for files changes. -Run webpack and watch for files changes. + Usage: webpack watch|w [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -2074,27 +2298,32 @@ Options: --watch-options-stdin Stop watching when stdin stream has ended. --no-watch-options-stdin Negative 'watch-options-stdin' option. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -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." + 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 for 'w' command using the "--help" option: stderr 1`] = `""`; exports[`help should show help information for 'w' command using the "--help" option: stdout 1`] = ` -"Usage: webpack watch|w [entries...] [options] +" + ⬡ webpack watch + ──────────────────────────────────────────────────────────────────────── + Run webpack and watch for files changes. -Run webpack and watch for files changes. + Usage: webpack watch|w [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -2116,27 +2345,33 @@ Options: -t, --target Specific environment, runtime, or syntax. Environment to build for. An array of environments to build for all of them when possible. --watch-options-stdin Stop watching when stdin stream has ended. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'watch' and respect the "--color" flag using the "--help" option: stderr 1`] = `""`; exports[`help should show help information for 'watch' and respect the "--color" flag using the "--help" option: stdout 1`] = ` -"Usage: webpack watch|w [entries...] [options] +" + ⬡ webpack watch + ──────────────────────────────────────────────────────────────────────── + Run webpack and watch for files changes. -Run webpack and watch for files changes. + Usage: webpack watch|w [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -2158,27 +2393,33 @@ Options: -t, --target Specific environment, runtime, or syntax. Environment to build for. An array of environments to build for all of them when possible. --watch-options-stdin Stop watching when stdin stream has ended. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'watch' and respect the "--no-color" flag using the "--help" option: stderr 1`] = `""`; exports[`help should show help information for 'watch' and respect the "--no-color" flag using the "--help" option: stdout 1`] = ` -"Usage: webpack watch|w [entries...] [options] +" + ⬡ webpack watch + ──────────────────────────────────────────────────────────────────────── + Run webpack and watch for files changes. -Run webpack and watch for files changes. + Usage: webpack watch|w [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -2200,27 +2441,33 @@ Options: -t, --target Specific environment, runtime, or syntax. Environment to build for. An array of environments to build for all of them when possible. --watch-options-stdin Stop watching when stdin stream has ended. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'watch' command using command syntax: stderr 1`] = `""`; exports[`help should show help information for 'watch' command using command syntax: stdout 1`] = ` -"Usage: webpack watch|w [entries...] [options] +" + ⬡ webpack watch + ──────────────────────────────────────────────────────────────────────── + Run webpack and watch for files changes. -Run webpack and watch for files changes. + Usage: webpack watch|w [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -2242,27 +2489,33 @@ Options: -t, --target Specific environment, runtime, or syntax. Environment to build for. An array of environments to build for all of them when possible. --watch-options-stdin Stop watching when stdin stream has ended. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 for 'watch' command using the "--help verbose" option: stderr 1`] = `""`; exports[`help should show help information for 'watch' command using the "--help verbose" option: stdout 1`] = ` -"Usage: webpack watch|w [entries...] [options] +" + ⬡ webpack watch + ──────────────────────────────────────────────────────────────────────── + Run webpack and watch for files changes. -Run webpack and watch for files changes. + Usage: webpack watch|w [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -2287,27 +2540,32 @@ Options: --watch-options-stdin Stop watching when stdin stream has ended. --no-watch-options-stdin Negative 'watch-options-stdin' option. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -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." + 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 for 'watch' command using the "--help" option: stderr 1`] = `""`; exports[`help should show help information for 'watch' command using the "--help" option: stdout 1`] = ` -"Usage: webpack watch|w [entries...] [options] +" + ⬡ webpack watch + ──────────────────────────────────────────────────────────────────────── + Run webpack and watch for files changes. -Run webpack and watch for files changes. + Usage: webpack watch|w [entries...] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -2329,28 +2587,34 @@ Options: -t, --target Specific environment, runtime, or syntax. Environment to build for. An array of environments to build for all of them when possible. --watch-options-stdin Stop watching when stdin stream has ended. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 command syntax: stderr 1`] = `""`; exports[`help should show help information using command syntax: stdout 1`] = ` -"Usage: webpack [entries...] [options] -Alternative usage to run commands: webpack [command] [options] +" + ⬡ webpack + ──────────────────────────────────────────────────────────────────────── + The build tool for modern web applications. -The build tool for modern web applications. + Usage: webpack [entries...] [options] + Alternative usage to run commands: webpack [command] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -2373,13 +2637,15 @@ Options: -w, --watch Enter watch mode, which rebuilds on file change. --watch-options-stdin Stop watching when stdin stream has ended. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -Commands: + Commands + ──────────────────────────────────────────────────────────────────────── build|bundle|b [entries...] [options] Run webpack (default command, can be omitted). configtest|t [config-path] Validate a webpack configuration. help|h [command] [option] Display help for commands and options. @@ -2388,48 +2654,57 @@ Commands: version|v [options] Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. watch|w [entries...] [options] Run webpack and watch for files changes. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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" option with the "verbose" value #2: stderr 1`] = `""`; exports[`help should show help information using the "--help" option with the "verbose" value #2: stdout 1`] = ` -"Usage: webpack [entries...] [options] -Alternative usage to run commands: webpack [command] [options] +" + ⬡ webpack + ──────────────────────────────────────────────────────────────────────── + The build tool for modern web applications. -The build tool for modern web applications. + Usage: w ... -Webpack documentation: https://webpack.js.org/. -CLI documentation: https://webpack.js.org/api/cli/. -Made with ♥ by the webpack team." + 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" option with the "verbose" value: stderr 1`] = `""`; exports[`help should show help information using the "--help" option with the "verbose" value: stdout 1`] = ` -"Usage: webpack [entries...] [options] -Alternative usage to run commands: webpack [command] [options] +" + ⬡ webpack + ──────────────────────────────────────────────────────────────────────── + The build tool for modern web applications. -The build tool for modern web applications. + Usage: w ... -Webpack documentation: https://webpack.js.org/. -CLI documentation: https://webpack.js.org/api/cli/. -Made with ♥ by the webpack team." + 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" option: stderr 1`] = `""`; exports[`help should show help information using the "--help" option: stdout 1`] = ` -"Usage: webpack [entries...] [options] -Alternative usage to run commands: webpack [command] [options] +" + ⬡ webpack + ──────────────────────────────────────────────────────────────────────── + The build tool for modern web applications. -The build tool for modern web applications. + Usage: webpack [entries...] [options] + Alternative usage to run commands: webpack [command] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -2452,13 +2727,15 @@ Options: -w, --watch Enter watch mode, which rebuilds on file change. --watch-options-stdin Stop watching when stdin stream has ended. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -Commands: + Commands + ──────────────────────────────────────────────────────────────────────── build|bundle|b [entries...] [options] Run webpack (default command, can be omitted). configtest|t [config-path] Validate a webpack configuration. help|h [command] [option] Display help for commands and options. @@ -2467,241 +2744,308 @@ Commands: version|v [options] Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. watch|w [entries...] [options] Run webpack and watch for files changes. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + 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 --cache-type" option when using serve: stderr 1`] = `""`; exports[`help should show help information using the "help --cache-type" option when using serve: stdout 1`] = ` -"Usage: webpack serve --cache-type -Description: In memory caching. Filesystem caching. -Possible values: 'memory' | 'filesystem' +" + ⬡ --cache-type + ──────────────────────────────────────────────────────────────────────── + Usage: webpack serve --cache-type + Description: In memory caching. Filesystem caching. + Possible values: 'memory' | 'filesystem' + ──────────────────────────────────────────────────────────────────────── -To see list of all supported commands and options run 'webpack --help=verbose'. + ℹ 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." + 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 --cache-type" option: stderr 1`] = `""`; exports[`help should show help information using the "help --cache-type" option: stdout 1`] = ` -"Usage: webpack --cache-type -Description: In memory caching. Filesystem caching. -Possible values: 'memory' | 'filesystem' +" + ⬡ --cache-type + ──────────────────────────────────────────────────────────────────────── + Usage: webpack --cache-type + Description: In memory caching. Filesystem caching. + Possible values: 'memory' | 'filesystem' + ──────────────────────────────────────────────────────────────────────── -To see list of all supported commands and options run 'webpack --help=verbose'. + ℹ 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." + 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 --color" option: stderr 1`] = `""`; exports[`help should show help information using the "help --color" option: stdout 1`] = ` -"Usage: webpack --color -Description: Enable colors on console. +" + ⬡ --color + ──────────────────────────────────────────────────────────────────────── + Usage: webpack --color + Description: Enable colors on console. + ──────────────────────────────────────────────────────────────────────── -To see list of all supported commands and options run 'webpack --help=verbose'. + ℹ 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." + 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 --mode" option: stderr 1`] = `""`; exports[`help should show help information using the "help --mode" option: stdout 1`] = ` -"Usage: webpack --mode -Description: Enable production optimizations or development hints. -Possible values: 'development' | 'production' | 'none' +" + ⬡ --mode + ──────────────────────────────────────────────────────────────────────── + Usage: webpack --mode + Description: Enable production optimizations or development hints. + Possible values: 'development' | 'production' | 'none' + ──────────────────────────────────────────────────────────────────────── -To see list of all supported commands and options run 'webpack --help=verbose'. + ℹ 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." + 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 --no-color" option: stderr 1`] = `""`; exports[`help should show help information using the "help --no-color" option: stdout 1`] = ` -"Usage: webpack --no-color -Description: Disable colors on console. +" + ⬡ --no-color + ──────────────────────────────────────────────────────────────────────── + Usage: webpack --no-color + Description: Disable colors on console. + ──────────────────────────────────────────────────────────────────────── -To see list of all supported commands and options run 'webpack --help=verbose'. + ℹ 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." + 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 --no-stats" option: stderr 1`] = `""`; exports[`help should show help information using the "help --no-stats" option: stdout 1`] = ` -"Usage: webpack --no-stats -Description: Negative 'stats' option. +" + ⬡ --no-stats + ──────────────────────────────────────────────────────────────────────── + Usage: webpack --no-stats + Description: Negative 'stats' option. + ──────────────────────────────────────────────────────────────────────── -To see list of all supported commands and options run 'webpack --help=verbose'. + ℹ 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." + 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 --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 -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 +" + ⬡ --output-chunk-format + ──────────────────────────────────────────────────────────────────────── + Usage: webpack --output-chunk-format + 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'. + ℹ 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." + 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 --server-type" option when using serve: stderr 1`] = `""`; exports[`help should show help information using the "help --server-type" option when using serve: stdout 1`] = ` -"Usage: webpack serve --server-type -Description: Allows to set server and options (by default 'http'). -Possible values: 'http' | 'https' | 'spdy' | 'http2' +" + ⬡ --server-type + ──────────────────────────────────────────────────────────────────────── + Usage: webpack serve --server-type + Description: Allows to set server and options (by default 'http'). + Possible values: 'http' | 'https' | 'spdy' | 'http2' + ──────────────────────────────────────────────────────────────────────── -To see list of all supported commands and options run 'webpack --help=verbose'. + ℹ 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." + 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' +" + ⬡ --stats + ──────────────────────────────────────────────────────────────────────── + Usage: webpack --stats [value] + Description: Stats options object or preset name. + 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'. + ℹ 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." + 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 --target" option: stderr 1`] = `""`; exports[`help should show help information using the "help --target" option: stdout 1`] = ` -"Usage: webpack --target -Short: webpack -t -Description: Specific environment, runtime, or syntax. Environment to build for. An array of environments to build for all of them when possible. -Possible values: false +" + ⬡ --target + ──────────────────────────────────────────────────────────────────────── + Usage: webpack --target + Short: webpack -t + Description: Specific environment, runtime, or syntax. Environment to build for. An array of environments to build for all of them when possible. + Possible values: false + ──────────────────────────────────────────────────────────────────────── -To see list of all supported commands and options run 'webpack --help=verbose'. + ℹ 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." + 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 --version" option: stderr 1`] = `""`; exports[`help should show help information using the "help --version" option: stdout 1`] = ` -"Usage: webpack --version -Short: webpack -v -Description: Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. +" + ⬡ --version + ──────────────────────────────────────────────────────────────────────── + Usage: webpack --version + Short: webpack -v + Description: Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. + ──────────────────────────────────────────────────────────────────────── -To see list of all supported commands and options run 'webpack --help=verbose'. + ℹ 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." + 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 -v" option: stderr 1`] = `""`; exports[`help should show help information using the "help -v" option: stdout 1`] = ` -"Usage: webpack --version -Short: webpack -v -Description: Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. +" + ⬡ --version + ──────────────────────────────────────────────────────────────────────── + Usage: webpack --version + Short: webpack -v + Description: Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. + ──────────────────────────────────────────────────────────────────────── -To see list of all supported commands and options run 'webpack --help=verbose'. + ℹ 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." + 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 serve --color" option: stderr 1`] = `""`; exports[`help should show help information using the "help serve --color" option: stdout 1`] = ` -"Usage: webpack serve --color -Description: Enable colors on console. +" + ⬡ --color + ──────────────────────────────────────────────────────────────────────── + Usage: webpack serve --color + Description: Enable colors on console. + ──────────────────────────────────────────────────────────────────────── -To see list of all supported commands and options run 'webpack --help=verbose'. + ℹ 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." + 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 serve --mode" option: stderr 1`] = `""`; exports[`help should show help information using the "help serve --mode" option: stdout 1`] = ` -"Usage: webpack serve --mode -Description: Enable production optimizations or development hints. -Possible values: 'development' | 'production' | 'none' +" + ⬡ --mode + ──────────────────────────────────────────────────────────────────────── + Usage: webpack serve --mode + Description: Enable production optimizations or development hints. + Possible values: 'development' | 'production' | 'none' + ──────────────────────────────────────────────────────────────────────── -To see list of all supported commands and options run 'webpack --help=verbose'. + ℹ 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." + 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 serve --no-color" option: stderr 1`] = `""`; exports[`help should show help information using the "help serve --no-color" option: stdout 1`] = ` -"Usage: webpack serve --no-color -Description: Disable colors on console. +" + ⬡ --no-color + ──────────────────────────────────────────────────────────────────────── + Usage: webpack serve --no-color + Description: Disable colors on console. + ──────────────────────────────────────────────────────────────────────── -To see list of all supported commands and options run 'webpack --help=verbose'. + ℹ 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." + 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 with options for sub commands: stderr 1`] = `""`; exports[`help should show help information with options for sub commands: stdout 1`] = ` -"Usage: webpack info|i [options] +" + ⬡ webpack info + ──────────────────────────────────────────────────────────────────────── + Outputs information about your system. -Outputs information about your system. + Usage: webpack info|i [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -o, --output To get the output in a specified format (accept json or markdown) -a, --additional-package Adds additional packages to the output -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + Webpack documentation: https://webpack.js.org/ + CLI documentation: https://webpack.js.org/api/cli/ + Made with ♥ by the webpack team" `; exports[`help should show the same information using the "--help" option and command syntax: stderr from command syntax 1`] = `""`; @@ -2709,12 +3053,16 @@ exports[`help should show the same information using the "--help" option and com exports[`help should show the same information using the "--help" option and command syntax: stderr from option 1`] = `""`; exports[`help should show the same information using the "--help" option and command syntax: stdout from command syntax 1`] = ` -"Usage: webpack [entries...] [options] -Alternative usage to run commands: webpack [command] [options] +" + ⬡ webpack + ──────────────────────────────────────────────────────────────────────── + The build tool for modern web applications. -The build tool for modern web applications. + Usage: webpack [entries...] [options] + Alternative usage to run commands: webpack [command] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -2737,13 +3085,15 @@ Options: -w, --watch Enter watch mode, which rebuilds on file change. --watch-options-stdin Stop watching when stdin stream has ended. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -Commands: + Commands + ──────────────────────────────────────────────────────────────────────── build|bundle|b [entries...] [options] Run webpack (default command, can be omitted). configtest|t [config-path] Validate a webpack configuration. help|h [command] [option] Display help for commands and options. @@ -2752,20 +3102,25 @@ Commands: version|v [options] Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. watch|w [entries...] [options] Run webpack and watch for files changes. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + Webpack documentation: https://webpack.js.org/ + CLI documentation: https://webpack.js.org/api/cli/ + Made with ♥ by the webpack team" `; exports[`help should show the same information using the "--help" option and command syntax: stdout from option 1`] = ` -"Usage: webpack [entries...] [options] -Alternative usage to run commands: webpack [command] [options] +" + ⬡ webpack + ──────────────────────────────────────────────────────────────────────── + The build tool for modern web applications. -The build tool for modern web applications. + Usage: webpack [entries...] [options] + Alternative usage to run commands: webpack [command] [options] -Options: + Options + ──────────────────────────────────────────────────────────────────────── -c, --config Provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js". --config-name Name(s) of particular configuration(s) to use if configuration file exports an array of multiple configurations. -m, --merge Merge two or more configurations using 'webpack-merge'. @@ -2788,13 +3143,15 @@ Options: -w, --watch Enter watch mode, which rebuilds on file change. --watch-options-stdin Stop watching when stdin stream has ended. -Global options: + Global options + ──────────────────────────────────────────────────────────────────────── --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. -h, --help [verbose] Display help for commands and options. -Commands: + Commands + ──────────────────────────────────────────────────────────────────────── build|bundle|b [entries...] [options] Run webpack (default command, can be omitted). configtest|t [config-path] Validate a webpack configuration. help|h [command] [option] Display help for commands and options. @@ -2803,9 +3160,10 @@ Commands: version|v [options] Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. watch|w [entries...] [options] Run webpack and watch for files changes. -To see list of all supported commands and options run 'webpack --help=verbose'. + ──────────────────────────────────────────────────────────────────────── + ℹ 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." + Webpack documentation: https://webpack.js.org/ + CLI documentation: https://webpack.js.org/api/cli/ + Made with ♥ by the webpack team" `; From 1b1faa0705e3c67e2cb0d5ab598e4fd51452c37f Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 17 Jun 2026 16:38:41 +0000 Subject: [PATCH 2/5] feat(cli): apply the styled UI to `info` and `version` output MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Extend the branded, section-divided UI (introduced for `--help`) to the `info` and `version` commands via a shared `#renderEnvinfo` helper and the reused `#uiHeader`/`#uiDivider` chrome. Each envinfo section gets a hexagon header and divider, rows are aligned, and "requested => resolved" version pairs render with a "→" arrow. `--output json` and `--output markdown` stay byte-for-byte machine-readable, and section titles/labels keep their trailing colon so existing tooling that greps for "System:", "Packages:" or "webpack:" keeps working. Colors collapse to plain text when output is piped or `--no-color` is set. Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_012j95RhPtEkRKfzDM4JEhdS --- packages/webpack-cli/src/webpack-cli.ts | 90 ++++++++++++++++++++++--- 1 file changed, 79 insertions(+), 11 deletions(-) diff --git a/packages/webpack-cli/src/webpack-cli.ts b/packages/webpack-cli/src/webpack-cli.ts index 82076846eb5..2693eb5aea7 100644 --- a/packages/webpack-cli/src/webpack-cli.ts +++ b/packages/webpack-cli/src/webpack-cli.ts @@ -246,6 +246,12 @@ type Options = const DEFAULT_WEBPACK_PACKAGES: string[] = ["webpack", "loader"]; +// Shared visual constants for the help/info/version "chrome" (header, dividers). +// These are purely cosmetic — colors collapse to plain strings when output is +// piped or `--no-color` is used, so the textual structure stays script-friendly. +const UI_INDENT = " "; +const UI_DIVIDER_WIDTH = 72; + // Options that get a single-character alias derived from their name. const FLAGS_WITH_ALIAS = new Set(["devtool", "output-path", "target", "watch", "extends"]); @@ -1361,15 +1367,13 @@ class WebpackCLI { value === "--version" || value === "-h" || value === "--help"; - const { bold, cyan, blue, red } = this.colors; + const { bold, cyan, red } = this.colors; // Shared "chrome" used to render the help screens. These are purely visual: // colors collapse to plain strings when colors are disabled (e.g. piped output // or `--no-color`), so the textual structure stays stable for scripts. - const INDENT = " "; - const DIVIDER_WIDTH = 72; - const divider = `${INDENT}${blue("─".repeat(DIVIDER_WIDTH))}`; - // The hexagon mirrors the webpack logo and brands every help/info screen. - const header = (title: string) => `${INDENT}${bold(cyan("⬡"))} ${bold(title)}`; + const INDENT = UI_INDENT; + const divider = this.#uiDivider(); + const header = (title: string) => this.#uiHeader(title); // Section headings ("Options", "Commands", …) get a colored title and an underline. const sectionTitle = (title: string) => `${INDENT}${bold(cyan(title))}\n${divider}`; const outputIncorrectUsageOfHelp = () => { @@ -1669,18 +1673,80 @@ class WebpackCLI { } async #renderVersion(options: { output?: string } = {}): Promise { - let info = await this.#getInfoOutput({ + const info = await this.#getInfoOutput({ ...options, information: { npmPackages: `{${DEFAULT_WEBPACK_PACKAGES.map((item) => `*${item}*`).join(",")}}`, }, }); - if (typeof options.output === "undefined") { - info = info.replace("Packages:", "").replaceAll(/^\s+/gm, "").trim(); + // `--output json|markdown` must stay machine-readable, so only the default + // plain-text output gets the visual treatment. + return typeof options.output === "undefined" ? this.#renderEnvinfo(info) : info; + } + + // ─── Shared UI "chrome" ─────────────────────────────────────────────── + // The hexagon mirrors the webpack logo and brands every help/info/version screen. + #uiDivider(): string { + return `${UI_INDENT}${this.colors.blue("─".repeat(UI_DIVIDER_WIDTH))}`; + } + + #uiHeader(title: string): string { + const { bold, cyan } = this.colors; + return `${UI_INDENT}${bold(cyan("⬡"))} ${bold(cyan(title))}`; + } + + /** + * Renders the plain-text output of `envinfo` (used by `info` and `version`) + * into branded sections with aligned rows. Section titles keep their trailing + * colon so existing tooling/assertions that grep for e.g. "System:" keep working, + * and "requested => resolved" version pairs are shown with a "→" arrow. + * @param {string} raw The raw multi-line text produced by `envinfo`. + * @returns {string} The styled, section-divided output. + */ + #renderEnvinfo(raw: string): string { + const { bold, cyan, green } = this.colors; + const lines: string[] = []; + const sections: { title: string; rows: { label: string; value: string }[] }[] = []; + let section: (typeof sections)[number] | undefined; + + for (const line of raw.split("\n")) { + const sectionMatch = /^ {2}(\S[^:]*):\s*$/.exec(line); + + if (sectionMatch) { + section = { title: sectionMatch[1].trim(), rows: [] }; + sections.push(section); + continue; + } + + const rowMatch = /^ {4}([^:]+):\s*(.*)$/.exec(line); + + if (rowMatch && section) { + section.rows.push({ label: rowMatch[1].trim(), value: rowMatch[2].trim() || "N/A" }); + } } - return info; + for (const { title, rows } of sections) { + if (rows.length === 0) { + continue; + } + + const labelWidth = Math.max(...rows.map((row) => row.label.length)) + 1; + + lines.push("", this.#uiHeader(`${title}:`), this.#uiDivider()); + + for (const { label, value } of rows) { + const arrowIndex = value.indexOf("=>"); + const renderedValue = + arrowIndex === -1 + ? green(value) + : `${green(value.slice(0, arrowIndex).trim())} ${cyan("→")} ${bold(green(value.slice(arrowIndex + 2).trim()))}`; + + lines.push(`${UI_INDENT}${bold(`${label}:`.padEnd(labelWidth))} ${renderedValue}`); + } + } + + return [...lines, this.#uiDivider()].join("\n"); } async #getInfoOutput(options: { @@ -2211,7 +2277,9 @@ class WebpackCLI { action: async (options: { output?: string; additionalPackage?: string[] }) => { const info = await this.#getInfoOutput(options); - this.logger.raw(info); + // `--output json|markdown` stays machine-readable; the default text output + // gets the branded, section-divided treatment. + this.logger.raw(typeof options.output === "undefined" ? this.#renderEnvinfo(info) : info); }, }, configtest: { From aa1ad4cc83cceb059ac1507204adfda754b53bfa Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 17 Jun 2026 17:02:08 +0000 Subject: [PATCH 3/5] feat(cli): extract shared UI module; frame info/version/configtest + add renderer snapshot tests MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add `packages/webpack-cli/src/ui.ts` — small, pure, colors-injected helpers for the CLI's visual chrome (header, divider, section title, status lines, footer, and the envinfo table renderer). The help screens, `info`, `version` and `configtest` now share these helpers instead of duplicating ad-hoc logging. - `info`/`version`/`configtest` are wrapped in a branded command frame (⬡ header + description + documentation footer). - `configtest` uses status icons: ✔ success / ✖ error / ⚠ warning / ℹ info. Errors stay on stderr (correct stream semantics), the rest on stdout. - `--output json|markdown` for info/version remains byte-for-byte machine-readable and unframed. Testing: add `test/api/ui.test.js`, a unit snapshot test that renders fixed input through every helper with a plain palette (so the snapshots show the exact rendered output — the "after") plus a tagged palette proving colors are applied to the right tokens. Update the configtest and CLI snapshots to the new framed output. Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_012j95RhPtEkRKfzDM4JEhdS --- packages/webpack-cli/src/ui.ts | 148 +++++++++++++++ packages/webpack-cli/src/webpack-cli.ts | 172 ++++++++---------- .../__snapshots__/CLI.test.js.snap.webpack5 | 18 +- .../__snapshots__/ui.test.js.snap.webpack5 | 79 ++++++++ test/api/ui.test.js | 98 ++++++++++ .../with-config-path.test.js.snap.webpack5 | 36 +++- .../without-config-path.test.js.snap.webpack5 | 14 +- ...ut-config-path-error.test.js.snap.webpack5 | 11 +- ...-multi-compiler-mode.test.js.snap.webpack5 | 14 +- ...ath-no-configuration.test.js.snap.webpack5 | 10 +- .../without-config-path.test.js.snap.webpack5 | 14 +- 11 files changed, 489 insertions(+), 125 deletions(-) create mode 100644 packages/webpack-cli/src/ui.ts create mode 100644 test/api/__snapshots__/ui.test.js.snap.webpack5 create mode 100644 test/api/ui.test.js diff --git a/packages/webpack-cli/src/ui.ts b/packages/webpack-cli/src/ui.ts new file mode 100644 index 00000000000..dc5cfae3728 --- /dev/null +++ b/packages/webpack-cli/src/ui.ts @@ -0,0 +1,148 @@ +/** + * webpack-cli shared UI helpers. + * + * Small, pure functions that render the CLI's visual "chrome" — branded + * headers, dividers, status lines, the documentation footer and the + * `envinfo` tables used by `info`/`version`. + * + * They take a `colors` palette so the exact same code renders with or without + * ANSI colors: when colors are disabled (piped output, `--no-color`, or a + * plain palette in tests) every function collapses to plain text, so the + * textual structure stays stable and script-friendly. + */ + +export interface UiColors { + bold: (value?: string) => string; + cyan: (value?: string) => string; + blue: (value?: string) => string; + green: (value?: string) => string; + red: (value?: string) => string; + yellow: (value?: string) => string; +} + +export interface FooterOptions { + /** When `true`, the "run --help=verbose" hint is omitted (already verbose). */ + verbose?: boolean; +} + +// Every help/info/version screen is indented by two spaces and branded with a +// hexagon that mirrors the webpack logo. +export const UI_INDENT = " "; +export const UI_DIVIDER_WIDTH = 72; + +const STATUS_ICONS = { success: "✔", error: "✖", warning: "⚠", info: "ℹ" } as const; + +export type StatusKind = keyof typeof STATUS_ICONS; + +/** A horizontal rule used to separate sections. */ +export function divider(colors: UiColors): string { + return `${UI_INDENT}${colors.blue("─".repeat(UI_DIVIDER_WIDTH))}`; +} + +/** A branded title, e.g. `⬡ webpack build`. */ +export function header(colors: UiColors, title: string): string { + return `${UI_INDENT}${colors.bold(colors.cyan("⬡"))} ${colors.bold(colors.cyan(title))}`; +} + +/** A section heading with an underline, e.g. `Options` followed by a divider. */ +export function sectionTitle(colors: UiColors, title: string): string { + return `${UI_INDENT}${colors.bold(colors.cyan(title))}\n${divider(colors)}`; +} + +/** A single status message prefixed with an icon (`✔`/`✖`/`⚠`/`ℹ`). */ +export function statusLine(colors: UiColors, kind: StatusKind, message: string): string { + const color = { + success: colors.green, + error: colors.red, + warning: colors.yellow, + info: colors.cyan, + }[kind]; + + return `${UI_INDENT}${color(STATUS_ICONS[kind])} ${message}`; +} + +/** The header block printed at the top of a framed command (`info`, `version`, …). */ +export function commandHeader(colors: UiColors, name: string, description?: string): string { + const lines = ["", header(colors, `webpack ${name}`), divider(colors)]; + + if (description) { + lines.push(`${UI_INDENT}${description}`, ""); + } + + return lines.join("\n"); +} + +/** The documentation footer shared by every help and framed-command screen. */ +export function footer(colors: UiColors, options: FooterOptions = {}): string { + const lines: string[] = []; + + if (!options.verbose) { + lines.push( + `${UI_INDENT}${colors.cyan("ℹ")} Run ${colors.bold("'webpack --help=verbose'")} to see all available commands and options.`, + ); + } + + lines.push( + "", + `${UI_INDENT}${colors.bold("Webpack documentation:")} ${colors.cyan("https://webpack.js.org/")}`, + `${UI_INDENT}${colors.bold("CLI documentation:")} ${colors.cyan("https://webpack.js.org/api/cli/")}`, + `${UI_INDENT}${colors.bold("Made with")} ${colors.red("♥")} ${colors.bold("by the webpack team")}`, + ); + + return lines.join("\n"); +} + +/** + * Renders the plain-text output of `envinfo` (used by `info` and `version`) + * into branded sections with aligned rows. Section titles keep their trailing + * colon so existing tooling/assertions that grep for e.g. "System:" keep + * working, and "requested => resolved" version pairs are shown with a "→" + * arrow. + * @param {UiColors} colors The color palette to render with. + * @param {string} raw The raw multi-line text produced by `envinfo`. + * @returns {string} The styled, section-divided output. + */ +export function renderEnvinfo(colors: UiColors, raw: string): string { + const { bold, cyan, green } = colors; + const lines: string[] = []; + const sections: { title: string; rows: { label: string; value: string }[] }[] = []; + let section: (typeof sections)[number] | undefined; + + for (const line of raw.split("\n")) { + const sectionMatch = /^ {2}(\S[^:]*):\s*$/.exec(line); + + if (sectionMatch) { + section = { title: sectionMatch[1].trim(), rows: [] }; + sections.push(section); + continue; + } + + const rowMatch = /^ {4}([^:]+):\s*(.*)$/.exec(line); + + if (rowMatch && section) { + section.rows.push({ label: rowMatch[1].trim(), value: rowMatch[2].trim() || "N/A" }); + } + } + + for (const { title, rows } of sections) { + if (rows.length === 0) { + continue; + } + + const labelWidth = Math.max(...rows.map((row) => row.label.length)) + 1; + + lines.push("", header(colors, `${title}:`), divider(colors)); + + for (const { label, value } of rows) { + const arrowIndex = value.indexOf("=>"); + const renderedValue = + arrowIndex === -1 + ? green(value) + : `${green(value.slice(0, arrowIndex).trim())} ${cyan("→")} ${bold(green(value.slice(arrowIndex + 2).trim()))}`; + + lines.push(`${UI_INDENT}${bold(`${label}:`.padEnd(labelWidth))} ${renderedValue}`); + } + } + + return [...lines, divider(colors)].join("\n"); +} diff --git a/packages/webpack-cli/src/webpack-cli.ts b/packages/webpack-cli/src/webpack-cli.ts index 2693eb5aea7..1b29c542f05 100644 --- a/packages/webpack-cli/src/webpack-cli.ts +++ b/packages/webpack-cli/src/webpack-cli.ts @@ -31,6 +31,16 @@ import { default as webpack, } from "webpack"; import { type Configuration as DevServerConfiguration } from "webpack-dev-server"; +import { + type StatusKind, + UI_INDENT, + commandHeader, + divider as uiDivider, + footer as uiFooter, + header as uiHeader, + renderEnvinfo, + statusLine, +} from "./ui.js"; const WEBPACK_PACKAGE_IS_CUSTOM = Boolean(process.env.WEBPACK_PACKAGE); const WEBPACK_PACKAGE = WEBPACK_PACKAGE_IS_CUSTOM @@ -246,12 +256,6 @@ type Options = const DEFAULT_WEBPACK_PACKAGES: string[] = ["webpack", "loader"]; -// Shared visual constants for the help/info/version "chrome" (header, dividers). -// These are purely cosmetic — colors collapse to plain strings when output is -// piped or `--no-color` is used, so the textual structure stays script-friendly. -const UI_INDENT = " "; -const UI_DIVIDER_WIDTH = 72; - // Options that get a single-character alias derived from their name. const FLAGS_WITH_ALIAS = new Set(["devtool", "output-path", "target", "watch", "extends"]); @@ -1367,7 +1371,7 @@ class WebpackCLI { value === "--version" || value === "-h" || value === "--help"; - const { bold, cyan, red } = this.colors; + const { bold, cyan } = this.colors; // Shared "chrome" used to render the help screens. These are purely visual: // colors collapse to plain strings when colors are disabled (e.g. piped output // or `--no-color`), so the textual structure stays stable for scripts. @@ -1654,21 +1658,8 @@ class WebpackCLI { outputIncorrectUsageOfHelp(); } - // Footer — shared across every help screen. - if (!isVerbose) { - this.logger.raw( - `${INDENT}${cyan("ℹ")} Run ${bold("'webpack --help=verbose'")} to see all available commands and options.`, - ); - } - - this.logger.raw(""); - this.logger.raw( - `${INDENT}${bold("Webpack documentation:")} ${cyan("https://webpack.js.org/")}`, - ); - this.logger.raw( - `${INDENT}${bold("CLI documentation:")} ${cyan("https://webpack.js.org/api/cli/")}`, - ); - this.logger.raw(`${INDENT}${bold("Made with")} ${red("♥")} ${bold("by the webpack team")}`); + // Footer — shared across every help screen and framed command. + this.logger.raw(uiFooter(this.colors, { verbose: isVerbose })); process.exit(0); } @@ -1682,71 +1673,41 @@ class WebpackCLI { // `--output json|markdown` must stay machine-readable, so only the default // plain-text output gets the visual treatment. - return typeof options.output === "undefined" ? this.#renderEnvinfo(info) : info; + return typeof options.output === "undefined" ? renderEnvinfo(this.colors, info) : info; } - // ─── Shared UI "chrome" ─────────────────────────────────────────────── - // The hexagon mirrors the webpack logo and brands every help/info/version screen. + // ─── Shared UI "chrome" (thin wrappers around ./ui that bind `this.colors`) ── #uiDivider(): string { - return `${UI_INDENT}${this.colors.blue("─".repeat(UI_DIVIDER_WIDTH))}`; + return uiDivider(this.colors); } #uiHeader(title: string): string { - const { bold, cyan } = this.colors; - return `${UI_INDENT}${bold(cyan("⬡"))} ${bold(cyan(title))}`; + return uiHeader(this.colors, title); } /** - * Renders the plain-text output of `envinfo` (used by `info` and `version`) - * into branded sections with aligned rows. Section titles keep their trailing - * colon so existing tooling/assertions that grep for e.g. "System:" keep working, - * and "requested => resolved" version pairs are shown with a "→" arrow. - * @param {string} raw The raw multi-line text produced by `envinfo`. - * @returns {string} The styled, section-divided output. + * Prints a framed command screen: a branded header, the command body, and the + * shared documentation footer. Used by `info`, `version` and `configtest`. + * @param {object} meta The command name and a one-line description. + * @param {Function} body A callback that prints the command's main output. */ - #renderEnvinfo(raw: string): string { - const { bold, cyan, green } = this.colors; - const lines: string[] = []; - const sections: { title: string; rows: { label: string; value: string }[] }[] = []; - let section: (typeof sections)[number] | undefined; - - for (const line of raw.split("\n")) { - const sectionMatch = /^ {2}(\S[^:]*):\s*$/.exec(line); - - if (sectionMatch) { - section = { title: sectionMatch[1].trim(), rows: [] }; - sections.push(section); - continue; - } - - const rowMatch = /^ {4}([^:]+):\s*(.*)$/.exec(line); - - if (rowMatch && section) { - section.rows.push({ label: rowMatch[1].trim(), value: rowMatch[2].trim() || "N/A" }); - } - } - - for (const { title, rows } of sections) { - if (rows.length === 0) { - continue; - } - - const labelWidth = Math.max(...rows.map((row) => row.label.length)) + 1; - - lines.push("", this.#uiHeader(`${title}:`), this.#uiDivider()); - - for (const { label, value } of rows) { - const arrowIndex = value.indexOf("=>"); - const renderedValue = - arrowIndex === -1 - ? green(value) - : `${green(value.slice(0, arrowIndex).trim())} ${cyan("→")} ${bold(green(value.slice(arrowIndex + 2).trim()))}`; + async #frame( + meta: { name: string; description: string }, + body: () => void | Promise, + ): Promise { + this.logger.raw(commandHeader(this.colors, meta.name, meta.description)); + await body(); + this.logger.raw(uiFooter(this.colors)); + } - lines.push(`${UI_INDENT}${bold(`${label}:`.padEnd(labelWidth))} ${renderedValue}`); - } + /** Prints a status message with an icon; errors go to stderr, the rest to stdout. */ + #status(kind: StatusKind, message: string): void { + if (kind === "error") { + process.stderr.write(`${statusLine(this.colors, kind, message)}\n`); + return; } - return [...lines, this.#uiDivider()].join("\n"); + this.logger.raw(statusLine(this.colors, kind, message)); } async #getInfoOutput(options: { @@ -2242,9 +2203,16 @@ class WebpackCLI { }, ], action: async (options: { output?: string }) => { - const info = await this.#renderVersion(options); + // `--output json|markdown` stays machine-readable and unframed. + if (options.output) { + this.logger.raw(await this.#renderVersion(options)); + return; + } - this.logger.raw(info); + await this.#frame( + { name: "version", description: "Installed package versions." }, + async () => this.logger.raw(await this.#renderVersion(options)), + ); }, }, info: { @@ -2277,9 +2245,16 @@ class WebpackCLI { action: async (options: { output?: string; additionalPackage?: string[] }) => { const info = await this.#getInfoOutput(options); - // `--output json|markdown` stays machine-readable; the default text output - // gets the branded, section-divided treatment. - this.logger.raw(typeof options.output === "undefined" ? this.#renderEnvinfo(info) : info); + // `--output json|markdown` stays machine-readable and unframed. + if (options.output) { + this.logger.raw(info); + return; + } + + await this.#frame( + { name: "info", description: "System and environment information." }, + () => this.logger.raw(renderEnvinfo(this.colors, info)), + ); }, }, configtest: { @@ -2318,26 +2293,31 @@ class WebpackCLI { } } - if (configPaths.size === 0) { - this.logger.error("No configuration found."); - process.exit(2); - } - - this.logger.info(`Validate '${[...configPaths].join(" ,")}'.`); + await this.#frame( + { name: "configtest", description: "Validating your webpack configuration." }, + () => { + if (configPaths.size === 0) { + this.#status("error", "No configuration found."); + process.exit(2); + } - try { - cmd.context.webpack.validate(config.options); - } catch (error) { - if (this.isValidationError(error as Error)) { - this.logger.error((error as Error).message); - } else { - this.logger.error(error); - } + this.#status("info", `Validating: ${[...configPaths].join(", ")}`); - process.exit(2); - } + try { + cmd.context.webpack.validate(config.options); + } catch (error) { + this.#status( + "error", + this.isValidationError(error as Error) + ? (error as Error).message + : String(error instanceof Error ? error.message : error), + ); + process.exit(2); + } - this.logger.success("There are no validation errors in the given webpack configuration."); + this.#status("success", "No validation errors found."); + }, + ); }, }, }; diff --git a/test/api/__snapshots__/CLI.test.js.snap.webpack5 b/test/api/__snapshots__/CLI.test.js.snap.webpack5 index 84299788c61..81a91e0c740 100644 --- a/test/api/__snapshots__/CLI.test.js.snap.webpack5 +++ b/test/api/__snapshots__/CLI.test.js.snap.webpack5 @@ -27,19 +27,11 @@ exports[`CLI API custom help output should display help information 1`] = ` "", ], [ - " ℹ 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", + " ℹ 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", ], ] `; diff --git a/test/api/__snapshots__/ui.test.js.snap.webpack5 b/test/api/__snapshots__/ui.test.js.snap.webpack5 new file mode 100644 index 00000000000..7f618dc813c --- /dev/null +++ b/test/api/__snapshots__/ui.test.js.snap.webpack5 @@ -0,0 +1,79 @@ +// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing + +exports[`ui renderer colorizes the header tokens 1`] = `" ⬡ webpack build"`; + +exports[`ui renderer renderEnvinfo falls back to N/A for empty values 1`] = ` +" + ⬡ System: + ──────────────────────────────────────────────────────────────────────── + OS: N/A + ────────────────────────────────────────────────────────────────────────" +`; + +exports[`ui renderer renderEnvinfo renders \`info\`-style output into aligned sections 1`] = ` +" + ⬡ System: + ──────────────────────────────────────────────────────────────────────── + OS: Linux 6.0 Ubuntu + CPU: (4) x64 Intel + Memory: 1.00 GB / 2.00 GB + + ⬡ Binaries: + ──────────────────────────────────────────────────────────────────────── + Node: 1.2.3 - /usr/bin/node + npm: 4.5.6 - /usr/bin/npm + ────────────────────────────────────────────────────────────────────────" +`; + +exports[`ui renderer renderEnvinfo renders \`version\`-style output with resolved arrows 1`] = ` +" + ⬡ Packages: + ──────────────────────────────────────────────────────────────────────── + webpack: ^5.0.0 → 5.1.2 + webpack-cli: ^6.0.0 → 6.1.0 + ────────────────────────────────────────────────────────────────────────" +`; + +exports[`ui renderer renders a branded header 1`] = `" ⬡ webpack build"`; + +exports[`ui renderer renders a error status line 1`] = `" ✖ Something happened."`; + +exports[`ui renderer renders a info status line 1`] = `" ℹ Something happened."`; + +exports[`ui renderer renders a section title with an underline 1`] = ` +" Options + ────────────────────────────────────────────────────────────────────────" +`; + +exports[`ui renderer renders a success status line 1`] = `" ✔ Something happened."`; + +exports[`ui renderer renders a warning status line 1`] = `" ⚠ Something happened."`; + +exports[`ui renderer renders the command header block with a description 1`] = ` +" + ⬡ webpack info + ──────────────────────────────────────────────────────────────────────── + System and environment information. +" +`; + +exports[`ui renderer renders the command header block without a description 1`] = ` +" + ⬡ webpack configtest + ────────────────────────────────────────────────────────────────────────" +`; + +exports[`ui renderer renders the footer 1`] = ` +" ℹ 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" +`; + +exports[`ui renderer renders the footer in verbose mode (no hint) 1`] = ` +" + Webpack documentation: https://webpack.js.org/ + CLI documentation: https://webpack.js.org/api/cli/ + Made with ♥ by the webpack team" +`; diff --git a/test/api/ui.test.js b/test/api/ui.test.js new file mode 100644 index 00000000000..8e6c45d204f --- /dev/null +++ b/test/api/ui.test.js @@ -0,0 +1,98 @@ +"use strict"; + +const ui = require("../../packages/webpack-cli/lib/ui"); + +// A plain (identity) palette so snapshots show the rendered *structure* as +// printed when colors are disabled (piped output / `--no-color`). This is +// exactly what scripts and the test harness see. +const plainColors = { + bold: (value = "") => value, + cyan: (value = "") => value, + blue: (value = "") => value, + green: (value = "") => value, + red: (value = "") => value, + yellow: (value = "") => value, +}; + +// A palette that wraps each token so we can assert colors are applied at all +// (and applied to the right pieces) without depending on ANSI escape codes. +const tagColors = { + bold: (value = "") => `${value}`, + cyan: (value = "") => `${value}`, + blue: (value = "") => `${value}`, + green: (value = "") => `${value}`, + red: (value = "") => `${value}`, + yellow: (value = "") => `${value}`, +}; + +describe("ui renderer", () => { + it("renders a branded header", () => { + expect(ui.header(plainColors, "webpack build")).toMatchSnapshot(); + }); + + it("colorizes the header tokens", () => { + expect(ui.header(tagColors, "webpack build")).toMatchSnapshot(); + }); + + it("renders a section title with an underline", () => { + expect(ui.sectionTitle(plainColors, "Options")).toMatchSnapshot(); + }); + + it("renders the command header block with a description", () => { + expect( + ui.commandHeader(plainColors, "info", "System and environment information."), + ).toMatchSnapshot(); + }); + + it("renders the command header block without a description", () => { + expect(ui.commandHeader(plainColors, "configtest")).toMatchSnapshot(); + }); + + it.each(["success", "error", "warning", "info"])("renders a %s status line", (kind) => { + expect(ui.statusLine(plainColors, kind, "Something happened.")).toMatchSnapshot(); + }); + + it("renders the footer", () => { + expect(ui.footer(plainColors)).toMatchSnapshot(); + }); + + it("renders the footer in verbose mode (no hint)", () => { + expect(ui.footer(plainColors, { verbose: true })).toMatchSnapshot(); + }); + + describe("renderEnvinfo", () => { + it("renders `info`-style output into aligned sections", () => { + const raw = [ + "", + " System:", + " OS: Linux 6.0 Ubuntu", + " CPU: (4) x64 Intel", + " Memory: 1.00 GB / 2.00 GB", + " Binaries:", + " Node: 1.2.3 - /usr/bin/node", + " npm: 4.5.6 - /usr/bin/npm", + "", + ].join("\n"); + + expect(ui.renderEnvinfo(plainColors, raw)).toMatchSnapshot(); + }); + + it("renders `version`-style output with resolved arrows", () => { + const raw = [ + "", + " Packages:", + " webpack: ^5.0.0 => 5.1.2 ", + " webpack-cli: ^6.0.0 => 6.1.0 ", + "", + ].join("\n"); + + expect(ui.renderEnvinfo(plainColors, raw)).toMatchSnapshot(); + }); + + it("falls back to N/A for empty values", () => { + const raw = [" System:", " OS: ", ""].join("\n"); + + expect(ui.renderEnvinfo(plainColors, raw)).toMatchSnapshot(); + }); + }); +}); diff --git a/test/configtest/with-config-path/__snapshots__/with-config-path.test.js.snap.webpack5 b/test/configtest/with-config-path/__snapshots__/with-config-path.test.js.snap.webpack5 index 02ba96accc8..d3888fbc8ac 100644 --- a/test/configtest/with-config-path/__snapshots__/with-config-path.test.js.snap.webpack5 +++ b/test/configtest/with-config-path/__snapshots__/with-config-path.test.js.snap.webpack5 @@ -18,26 +18,50 @@ exports[`'configtest' command with the configuration path option should throw sy exports[`'configtest' command with the configuration path option should throw syntax error: stdout 1`] = `""`; exports[`'configtest' command with the configuration path option should throw validation error: stderr 1`] = ` -"[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. +" ✖ Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration.mode should be one of these: "development" | "production" | "none" -> Enable production optimizations or development hints." `; -exports[`'configtest' command with the configuration path option should throw validation error: stdout 1`] = `"[webpack-cli] Validate './error.config.js'."`; +exports[`'configtest' command with the configuration path option should throw validation error: stdout 1`] = ` +" + ⬡ webpack configtest + ──────────────────────────────────────────────────────────────────────── + Validating your webpack configuration. + + ℹ Validating: ./error.config.js" +`; exports[`'configtest' command with the configuration path option should validate the config with alias 't': stderr 1`] = ` -"[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. +" ✖ Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration.mode should be one of these: "development" | "production" | "none" -> Enable production optimizations or development hints." `; -exports[`'configtest' command with the configuration path option should validate the config with alias 't': stdout 1`] = `"[webpack-cli] Validate './error.config.js'."`; +exports[`'configtest' command with the configuration path option should validate the config with alias 't': stdout 1`] = ` +" + ⬡ webpack configtest + ──────────────────────────────────────────────────────────────────────── + Validating your webpack configuration. + + ℹ Validating: ./error.config.js" +`; exports[`'configtest' command with the configuration path option should validate webpack config successfully: stderr 1`] = `""`; exports[`'configtest' command with the configuration path option should validate webpack config successfully: stdout 1`] = ` -"[webpack-cli] Validate './basic.config.js'. -[webpack-cli] There are no validation errors in the given webpack configuration." +" + ⬡ webpack configtest + ──────────────────────────────────────────────────────────────────────── + Validating your webpack configuration. + + ℹ Validating: ./basic.config.js + ✔ No validation errors found. + ℹ 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" `; diff --git a/test/configtest/without-config-path-custom-extension/__snapshots__/without-config-path.test.js.snap.webpack5 b/test/configtest/without-config-path-custom-extension/__snapshots__/without-config-path.test.js.snap.webpack5 index ad0ccb9e75c..10f0f6e3914 100644 --- a/test/configtest/without-config-path-custom-extension/__snapshots__/without-config-path.test.js.snap.webpack5 +++ b/test/configtest/without-config-path-custom-extension/__snapshots__/without-config-path.test.js.snap.webpack5 @@ -3,6 +3,16 @@ exports[`'configtest' command without the configuration path option should validate default configuration: stderr 1`] = `""`; exports[`'configtest' command without the configuration path option should validate default configuration: stdout 1`] = ` -"[webpack-cli] Validate '/test/configtest/without-config-path-custom-extension/webpack.config.json'. -[webpack-cli] There are no validation errors in the given webpack configuration." +" + ⬡ webpack configtest + ──────────────────────────────────────────────────────────────────────── + Validating your webpack configuration. + + ℹ Validating: /test/configtest/without-config-path-custom-extension/webpack.config.json + ✔ No validation errors found. + ℹ 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" `; diff --git a/test/configtest/without-config-path-error/__snapshots__/without-config-path-error.test.js.snap.webpack5 b/test/configtest/without-config-path-error/__snapshots__/without-config-path-error.test.js.snap.webpack5 index 1935057293c..b67c2d9e662 100644 --- a/test/configtest/without-config-path-error/__snapshots__/without-config-path-error.test.js.snap.webpack5 +++ b/test/configtest/without-config-path-error/__snapshots__/without-config-path-error.test.js.snap.webpack5 @@ -1,10 +1,17 @@ // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing exports[`'configtest' command without the configuration path option should validate default configuration: stderr 1`] = ` -"[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. +" ✖ Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration.mode should be one of these: "development" | "production" | "none" -> Enable production optimizations or development hints." `; -exports[`'configtest' command without the configuration path option should validate default configuration: stdout 1`] = `"[webpack-cli] Validate '/test/configtest/without-config-path-error/webpack.config.js'."`; +exports[`'configtest' command without the configuration path option should validate default configuration: stdout 1`] = ` +" + ⬡ webpack configtest + ──────────────────────────────────────────────────────────────────────── + Validating your webpack configuration. + + ℹ Validating: /test/configtest/without-config-path-error/webpack.config.js" +`; diff --git a/test/configtest/without-config-path-multi-compiler-mode/__snapshots__/without-config-path-multi-compiler-mode.test.js.snap.webpack5 b/test/configtest/without-config-path-multi-compiler-mode/__snapshots__/without-config-path-multi-compiler-mode.test.js.snap.webpack5 index c0d7f799622..ef55209a98b 100644 --- a/test/configtest/without-config-path-multi-compiler-mode/__snapshots__/without-config-path-multi-compiler-mode.test.js.snap.webpack5 +++ b/test/configtest/without-config-path-multi-compiler-mode/__snapshots__/without-config-path-multi-compiler-mode.test.js.snap.webpack5 @@ -3,6 +3,16 @@ exports[`'configtest' command without the configuration path option should validate default configuration: stderr 1`] = `""`; exports[`'configtest' command without the configuration path option should validate default configuration: stdout 1`] = ` -"[webpack-cli] Validate '/test/configtest/without-config-path-multi-compiler-mode/webpack.config.js'. -[webpack-cli] There are no validation errors in the given webpack configuration." +" + ⬡ webpack configtest + ──────────────────────────────────────────────────────────────────────── + Validating your webpack configuration. + + ℹ Validating: /test/configtest/without-config-path-multi-compiler-mode/webpack.config.js + ✔ No validation errors found. + ℹ 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" `; diff --git a/test/configtest/without-config-path-no-configuration/__snapshots__/without-config-path-no-configuration.test.js.snap.webpack5 b/test/configtest/without-config-path-no-configuration/__snapshots__/without-config-path-no-configuration.test.js.snap.webpack5 index 644eaea3844..c3149333411 100644 --- a/test/configtest/without-config-path-no-configuration/__snapshots__/without-config-path-no-configuration.test.js.snap.webpack5 +++ b/test/configtest/without-config-path-no-configuration/__snapshots__/without-config-path-no-configuration.test.js.snap.webpack5 @@ -1,5 +1,11 @@ // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing -exports[`'configtest' command without the configuration path option should validate default configuration: stderr 1`] = `"[webpack-cli] No configuration found."`; +exports[`'configtest' command without the configuration path option should validate default configuration: stderr 1`] = `" ✖ No configuration found."`; -exports[`'configtest' command without the configuration path option should validate default configuration: stdout 1`] = `""`; +exports[`'configtest' command without the configuration path option should validate default configuration: stdout 1`] = ` +" + ⬡ webpack configtest + ──────────────────────────────────────────────────────────────────────── + Validating your webpack configuration. +" +`; diff --git a/test/configtest/without-config-path/__snapshots__/without-config-path.test.js.snap.webpack5 b/test/configtest/without-config-path/__snapshots__/without-config-path.test.js.snap.webpack5 index 641a870ec09..3ab20eb9dd5 100644 --- a/test/configtest/without-config-path/__snapshots__/without-config-path.test.js.snap.webpack5 +++ b/test/configtest/without-config-path/__snapshots__/without-config-path.test.js.snap.webpack5 @@ -3,6 +3,16 @@ exports[`'configtest' command without the configuration path option should validate default configuration: stderr 1`] = `""`; exports[`'configtest' command without the configuration path option should validate default configuration: stdout 1`] = ` -"[webpack-cli] Validate '/test/configtest/without-config-path/webpack.config.js'. -[webpack-cli] There are no validation errors in the given webpack configuration." +" + ⬡ webpack configtest + ──────────────────────────────────────────────────────────────────────── + Validating your webpack configuration. + + ℹ Validating: /test/configtest/without-config-path/webpack.config.js + ✔ No validation errors found. + ℹ 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" `; From 45f3b0d928166b6ae1ba46f1adc247ae5b37aedf Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 17 Jun 2026 21:24:31 +0000 Subject: [PATCH 4/5] refactor(cli): inline the UI helpers as private methods (drop separate ui module) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Move the shared UI "chrome" renderers from the standalone src/ui.ts module into private `#` methods on WebpackCLI (#uiHeader, #uiDivider, #uiSectionTitle, #uiStatusLine, #uiCommandHeader, #uiFooter, #renderEnvinfo). They read `this.colors` directly instead of taking a palette argument — no extra file and nothing new on the public surface. Since `#` methods can't be unit-tested in isolation, the styled output is now covered by integration snapshots that exercise the real commands: help and configtest already capture the header/divider/section-title/status-icon/footer chrome, and a new deterministic `version` snapshot captures the framed envinfo table. Removed test/api/ui.test.js accordingly. Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_012j95RhPtEkRKfzDM4JEhdS --- packages/webpack-cli/src/ui.ts | 148 ------------------ packages/webpack-cli/src/webpack-cli.ts | 147 ++++++++++++++--- .../__snapshots__/ui.test.js.snap.webpack5 | 79 ---------- test/api/ui.test.js | 98 ------------ .../output.test.js.snap.webpack5 | 26 +++ test/version/output.test.js | 4 +- 6 files changed, 155 insertions(+), 347 deletions(-) delete mode 100644 packages/webpack-cli/src/ui.ts delete mode 100644 test/api/__snapshots__/ui.test.js.snap.webpack5 delete mode 100644 test/api/ui.test.js create mode 100644 test/version/__snapshots__/output.test.js.snap.webpack5 diff --git a/packages/webpack-cli/src/ui.ts b/packages/webpack-cli/src/ui.ts deleted file mode 100644 index dc5cfae3728..00000000000 --- a/packages/webpack-cli/src/ui.ts +++ /dev/null @@ -1,148 +0,0 @@ -/** - * webpack-cli shared UI helpers. - * - * Small, pure functions that render the CLI's visual "chrome" — branded - * headers, dividers, status lines, the documentation footer and the - * `envinfo` tables used by `info`/`version`. - * - * They take a `colors` palette so the exact same code renders with or without - * ANSI colors: when colors are disabled (piped output, `--no-color`, or a - * plain palette in tests) every function collapses to plain text, so the - * textual structure stays stable and script-friendly. - */ - -export interface UiColors { - bold: (value?: string) => string; - cyan: (value?: string) => string; - blue: (value?: string) => string; - green: (value?: string) => string; - red: (value?: string) => string; - yellow: (value?: string) => string; -} - -export interface FooterOptions { - /** When `true`, the "run --help=verbose" hint is omitted (already verbose). */ - verbose?: boolean; -} - -// Every help/info/version screen is indented by two spaces and branded with a -// hexagon that mirrors the webpack logo. -export const UI_INDENT = " "; -export const UI_DIVIDER_WIDTH = 72; - -const STATUS_ICONS = { success: "✔", error: "✖", warning: "⚠", info: "ℹ" } as const; - -export type StatusKind = keyof typeof STATUS_ICONS; - -/** A horizontal rule used to separate sections. */ -export function divider(colors: UiColors): string { - return `${UI_INDENT}${colors.blue("─".repeat(UI_DIVIDER_WIDTH))}`; -} - -/** A branded title, e.g. `⬡ webpack build`. */ -export function header(colors: UiColors, title: string): string { - return `${UI_INDENT}${colors.bold(colors.cyan("⬡"))} ${colors.bold(colors.cyan(title))}`; -} - -/** A section heading with an underline, e.g. `Options` followed by a divider. */ -export function sectionTitle(colors: UiColors, title: string): string { - return `${UI_INDENT}${colors.bold(colors.cyan(title))}\n${divider(colors)}`; -} - -/** A single status message prefixed with an icon (`✔`/`✖`/`⚠`/`ℹ`). */ -export function statusLine(colors: UiColors, kind: StatusKind, message: string): string { - const color = { - success: colors.green, - error: colors.red, - warning: colors.yellow, - info: colors.cyan, - }[kind]; - - return `${UI_INDENT}${color(STATUS_ICONS[kind])} ${message}`; -} - -/** The header block printed at the top of a framed command (`info`, `version`, …). */ -export function commandHeader(colors: UiColors, name: string, description?: string): string { - const lines = ["", header(colors, `webpack ${name}`), divider(colors)]; - - if (description) { - lines.push(`${UI_INDENT}${description}`, ""); - } - - return lines.join("\n"); -} - -/** The documentation footer shared by every help and framed-command screen. */ -export function footer(colors: UiColors, options: FooterOptions = {}): string { - const lines: string[] = []; - - if (!options.verbose) { - lines.push( - `${UI_INDENT}${colors.cyan("ℹ")} Run ${colors.bold("'webpack --help=verbose'")} to see all available commands and options.`, - ); - } - - lines.push( - "", - `${UI_INDENT}${colors.bold("Webpack documentation:")} ${colors.cyan("https://webpack.js.org/")}`, - `${UI_INDENT}${colors.bold("CLI documentation:")} ${colors.cyan("https://webpack.js.org/api/cli/")}`, - `${UI_INDENT}${colors.bold("Made with")} ${colors.red("♥")} ${colors.bold("by the webpack team")}`, - ); - - return lines.join("\n"); -} - -/** - * Renders the plain-text output of `envinfo` (used by `info` and `version`) - * into branded sections with aligned rows. Section titles keep their trailing - * colon so existing tooling/assertions that grep for e.g. "System:" keep - * working, and "requested => resolved" version pairs are shown with a "→" - * arrow. - * @param {UiColors} colors The color palette to render with. - * @param {string} raw The raw multi-line text produced by `envinfo`. - * @returns {string} The styled, section-divided output. - */ -export function renderEnvinfo(colors: UiColors, raw: string): string { - const { bold, cyan, green } = colors; - const lines: string[] = []; - const sections: { title: string; rows: { label: string; value: string }[] }[] = []; - let section: (typeof sections)[number] | undefined; - - for (const line of raw.split("\n")) { - const sectionMatch = /^ {2}(\S[^:]*):\s*$/.exec(line); - - if (sectionMatch) { - section = { title: sectionMatch[1].trim(), rows: [] }; - sections.push(section); - continue; - } - - const rowMatch = /^ {4}([^:]+):\s*(.*)$/.exec(line); - - if (rowMatch && section) { - section.rows.push({ label: rowMatch[1].trim(), value: rowMatch[2].trim() || "N/A" }); - } - } - - for (const { title, rows } of sections) { - if (rows.length === 0) { - continue; - } - - const labelWidth = Math.max(...rows.map((row) => row.label.length)) + 1; - - lines.push("", header(colors, `${title}:`), divider(colors)); - - for (const { label, value } of rows) { - const arrowIndex = value.indexOf("=>"); - const renderedValue = - arrowIndex === -1 - ? green(value) - : `${green(value.slice(0, arrowIndex).trim())} ${cyan("→")} ${bold(green(value.slice(arrowIndex + 2).trim()))}`; - - lines.push(`${UI_INDENT}${bold(`${label}:`.padEnd(labelWidth))} ${renderedValue}`); - } - } - - return [...lines, divider(colors)].join("\n"); -} diff --git a/packages/webpack-cli/src/webpack-cli.ts b/packages/webpack-cli/src/webpack-cli.ts index 1b29c542f05..9be2841b29b 100644 --- a/packages/webpack-cli/src/webpack-cli.ts +++ b/packages/webpack-cli/src/webpack-cli.ts @@ -31,16 +31,6 @@ import { default as webpack, } from "webpack"; import { type Configuration as DevServerConfiguration } from "webpack-dev-server"; -import { - type StatusKind, - UI_INDENT, - commandHeader, - divider as uiDivider, - footer as uiFooter, - header as uiHeader, - renderEnvinfo, - statusLine, -} from "./ui.js"; const WEBPACK_PACKAGE_IS_CUSTOM = Boolean(process.env.WEBPACK_PACKAGE); const WEBPACK_PACKAGE = WEBPACK_PACKAGE_IS_CUSTOM @@ -256,6 +246,15 @@ type Options = const DEFAULT_WEBPACK_PACKAGES: string[] = ["webpack", "loader"]; +// Shared visual constants for the help/info/version/configtest "chrome". +// Colors collapse to plain strings when disabled (piped output or `--no-color`), +// so the textual structure stays stable and script-friendly. +const UI_INDENT = " "; +const UI_DIVIDER_WIDTH = 72; +const UI_STATUS_ICONS = { success: "✔", error: "✖", warning: "⚠", info: "ℹ" } as const; + +type StatusKind = keyof typeof UI_STATUS_ICONS; + // Options that get a single-character alias derived from their name. const FLAGS_WITH_ALIAS = new Set(["devtool", "output-path", "target", "watch", "extends"]); @@ -1379,7 +1378,7 @@ class WebpackCLI { const divider = this.#uiDivider(); const header = (title: string) => this.#uiHeader(title); // Section headings ("Options", "Commands", …) get a colored title and an underline. - const sectionTitle = (title: string) => `${INDENT}${bold(cyan(title))}\n${divider}`; + const sectionTitle = (title: string) => this.#uiSectionTitle(title); const outputIncorrectUsageOfHelp = () => { this.logger.error("Incorrect use of help"); this.logger.error( @@ -1659,7 +1658,7 @@ class WebpackCLI { } // Footer — shared across every help screen and framed command. - this.logger.raw(uiFooter(this.colors, { verbose: isVerbose })); + this.logger.raw(this.#uiFooter({ verbose: isVerbose })); process.exit(0); } @@ -1673,16 +1672,122 @@ class WebpackCLI { // `--output json|markdown` must stay machine-readable, so only the default // plain-text output gets the visual treatment. - return typeof options.output === "undefined" ? renderEnvinfo(this.colors, info) : info; + return typeof options.output === "undefined" ? this.#renderEnvinfo(info) : info; } - // ─── Shared UI "chrome" (thin wrappers around ./ui that bind `this.colors`) ── + // ─── Shared UI "chrome" ────────────────────────────────────────────────── + // Small, pure(-ish) renderers for the CLI's visual structure. They read + // `this.colors`, which collapses to plain strings when colors are disabled, + // so the textual layout is identical with or without ANSI. + + /** A horizontal rule used to separate sections. */ #uiDivider(): string { - return uiDivider(this.colors); + return `${UI_INDENT}${this.colors.blue("─".repeat(UI_DIVIDER_WIDTH))}`; } + /** A branded title, e.g. `⬡ webpack build`. */ #uiHeader(title: string): string { - return uiHeader(this.colors, title); + const { bold, cyan } = this.colors; + return `${UI_INDENT}${bold(cyan("⬡"))} ${bold(cyan(title))}`; + } + + /** A section heading with an underline, e.g. `Options` followed by a divider. */ + #uiSectionTitle(title: string): string { + const { bold, cyan } = this.colors; + return `${UI_INDENT}${bold(cyan(title))}\n${this.#uiDivider()}`; + } + + /** A single status message prefixed with an icon (`✔`/`✖`/`⚠`/`ℹ`). */ + #uiStatusLine(kind: StatusKind, message: string): string { + const { green, red, yellow, cyan } = this.colors; + const color = { success: green, error: red, warning: yellow, info: cyan }[kind]; + return `${UI_INDENT}${color(UI_STATUS_ICONS[kind])} ${message}`; + } + + /** The header block printed at the top of a framed command (`info`, `version`, …). */ + #uiCommandHeader(name: string, description?: string): string { + const lines = ["", this.#uiHeader(`webpack ${name}`), this.#uiDivider()]; + + if (description) { + lines.push(`${UI_INDENT}${description}`, ""); + } + + return lines.join("\n"); + } + + /** The documentation footer shared by every help and framed-command screen. */ + #uiFooter(options: { verbose?: boolean } = {}): string { + const { bold, cyan, red } = this.colors; + const lines: string[] = []; + + if (!options.verbose) { + lines.push( + `${UI_INDENT}${cyan("ℹ")} Run ${bold("'webpack --help=verbose'")} to see all available commands and options.`, + ); + } + + lines.push( + "", + `${UI_INDENT}${bold("Webpack documentation:")} ${cyan("https://webpack.js.org/")}`, + `${UI_INDENT}${bold("CLI documentation:")} ${cyan("https://webpack.js.org/api/cli/")}`, + `${UI_INDENT}${bold("Made with")} ${red("♥")} ${bold("by the webpack team")}`, + ); + + return lines.join("\n"); + } + + /** + * Renders the plain-text output of `envinfo` (used by `info` and `version`) + * into branded sections with aligned rows. Section titles keep their trailing + * colon so existing tooling/assertions that grep for e.g. "System:" keep + * working, and "requested => resolved" version pairs are shown with a "→" + * arrow. + * @param {string} raw The raw multi-line text produced by `envinfo`. + * @returns {string} The styled, section-divided output. + */ + #renderEnvinfo(raw: string): string { + const { bold, cyan, green } = this.colors; + const lines: string[] = []; + const sections: { title: string; rows: { label: string; value: string }[] }[] = []; + let section: (typeof sections)[number] | undefined; + + for (const line of raw.split("\n")) { + const sectionMatch = /^ {2}(\S[^:]*):\s*$/.exec(line); + + if (sectionMatch) { + section = { title: sectionMatch[1].trim(), rows: [] }; + sections.push(section); + continue; + } + + const rowMatch = /^ {4}([^:]+):\s*(.*)$/.exec(line); + + if (rowMatch && section) { + section.rows.push({ label: rowMatch[1].trim(), value: rowMatch[2].trim() || "N/A" }); + } + } + + for (const { title, rows } of sections) { + if (rows.length === 0) { + continue; + } + + const labelWidth = Math.max(...rows.map((row) => row.label.length)) + 1; + + lines.push("", this.#uiHeader(`${title}:`), this.#uiDivider()); + + for (const { label, value } of rows) { + const arrowIndex = value.indexOf("=>"); + const renderedValue = + arrowIndex === -1 + ? green(value) + : `${green(value.slice(0, arrowIndex).trim())} ${cyan("→")} ${bold(green(value.slice(arrowIndex + 2).trim()))}`; + + lines.push(`${UI_INDENT}${bold(`${label}:`.padEnd(labelWidth))} ${renderedValue}`); + } + } + + return [...lines, this.#uiDivider()].join("\n"); } /** @@ -1695,19 +1800,19 @@ class WebpackCLI { meta: { name: string; description: string }, body: () => void | Promise, ): Promise { - this.logger.raw(commandHeader(this.colors, meta.name, meta.description)); + this.logger.raw(this.#uiCommandHeader(meta.name, meta.description)); await body(); - this.logger.raw(uiFooter(this.colors)); + this.logger.raw(this.#uiFooter()); } /** Prints a status message with an icon; errors go to stderr, the rest to stdout. */ #status(kind: StatusKind, message: string): void { if (kind === "error") { - process.stderr.write(`${statusLine(this.colors, kind, message)}\n`); + process.stderr.write(`${this.#uiStatusLine(kind, message)}\n`); return; } - this.logger.raw(statusLine(this.colors, kind, message)); + this.logger.raw(this.#uiStatusLine(kind, message)); } async #getInfoOutput(options: { @@ -2253,7 +2358,7 @@ class WebpackCLI { await this.#frame( { name: "info", description: "System and environment information." }, - () => this.logger.raw(renderEnvinfo(this.colors, info)), + () => this.logger.raw(this.#renderEnvinfo(info)), ); }, }, diff --git a/test/api/__snapshots__/ui.test.js.snap.webpack5 b/test/api/__snapshots__/ui.test.js.snap.webpack5 deleted file mode 100644 index 7f618dc813c..00000000000 --- a/test/api/__snapshots__/ui.test.js.snap.webpack5 +++ /dev/null @@ -1,79 +0,0 @@ -// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing - -exports[`ui renderer colorizes the header tokens 1`] = `" ⬡ webpack build"`; - -exports[`ui renderer renderEnvinfo falls back to N/A for empty values 1`] = ` -" - ⬡ System: - ──────────────────────────────────────────────────────────────────────── - OS: N/A - ────────────────────────────────────────────────────────────────────────" -`; - -exports[`ui renderer renderEnvinfo renders \`info\`-style output into aligned sections 1`] = ` -" - ⬡ System: - ──────────────────────────────────────────────────────────────────────── - OS: Linux 6.0 Ubuntu - CPU: (4) x64 Intel - Memory: 1.00 GB / 2.00 GB - - ⬡ Binaries: - ──────────────────────────────────────────────────────────────────────── - Node: 1.2.3 - /usr/bin/node - npm: 4.5.6 - /usr/bin/npm - ────────────────────────────────────────────────────────────────────────" -`; - -exports[`ui renderer renderEnvinfo renders \`version\`-style output with resolved arrows 1`] = ` -" - ⬡ Packages: - ──────────────────────────────────────────────────────────────────────── - webpack: ^5.0.0 → 5.1.2 - webpack-cli: ^6.0.0 → 6.1.0 - ────────────────────────────────────────────────────────────────────────" -`; - -exports[`ui renderer renders a branded header 1`] = `" ⬡ webpack build"`; - -exports[`ui renderer renders a error status line 1`] = `" ✖ Something happened."`; - -exports[`ui renderer renders a info status line 1`] = `" ℹ Something happened."`; - -exports[`ui renderer renders a section title with an underline 1`] = ` -" Options - ────────────────────────────────────────────────────────────────────────" -`; - -exports[`ui renderer renders a success status line 1`] = `" ✔ Something happened."`; - -exports[`ui renderer renders a warning status line 1`] = `" ⚠ Something happened."`; - -exports[`ui renderer renders the command header block with a description 1`] = ` -" - ⬡ webpack info - ──────────────────────────────────────────────────────────────────────── - System and environment information. -" -`; - -exports[`ui renderer renders the command header block without a description 1`] = ` -" - ⬡ webpack configtest - ────────────────────────────────────────────────────────────────────────" -`; - -exports[`ui renderer renders the footer 1`] = ` -" ℹ 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" -`; - -exports[`ui renderer renders the footer in verbose mode (no hint) 1`] = ` -" - Webpack documentation: https://webpack.js.org/ - CLI documentation: https://webpack.js.org/api/cli/ - Made with ♥ by the webpack team" -`; diff --git a/test/api/ui.test.js b/test/api/ui.test.js deleted file mode 100644 index 8e6c45d204f..00000000000 --- a/test/api/ui.test.js +++ /dev/null @@ -1,98 +0,0 @@ -"use strict"; - -const ui = require("../../packages/webpack-cli/lib/ui"); - -// A plain (identity) palette so snapshots show the rendered *structure* as -// printed when colors are disabled (piped output / `--no-color`). This is -// exactly what scripts and the test harness see. -const plainColors = { - bold: (value = "") => value, - cyan: (value = "") => value, - blue: (value = "") => value, - green: (value = "") => value, - red: (value = "") => value, - yellow: (value = "") => value, -}; - -// A palette that wraps each token so we can assert colors are applied at all -// (and applied to the right pieces) without depending on ANSI escape codes. -const tagColors = { - bold: (value = "") => `${value}`, - cyan: (value = "") => `${value}`, - blue: (value = "") => `${value}`, - green: (value = "") => `${value}`, - red: (value = "") => `${value}`, - yellow: (value = "") => `${value}`, -}; - -describe("ui renderer", () => { - it("renders a branded header", () => { - expect(ui.header(plainColors, "webpack build")).toMatchSnapshot(); - }); - - it("colorizes the header tokens", () => { - expect(ui.header(tagColors, "webpack build")).toMatchSnapshot(); - }); - - it("renders a section title with an underline", () => { - expect(ui.sectionTitle(plainColors, "Options")).toMatchSnapshot(); - }); - - it("renders the command header block with a description", () => { - expect( - ui.commandHeader(plainColors, "info", "System and environment information."), - ).toMatchSnapshot(); - }); - - it("renders the command header block without a description", () => { - expect(ui.commandHeader(plainColors, "configtest")).toMatchSnapshot(); - }); - - it.each(["success", "error", "warning", "info"])("renders a %s status line", (kind) => { - expect(ui.statusLine(plainColors, kind, "Something happened.")).toMatchSnapshot(); - }); - - it("renders the footer", () => { - expect(ui.footer(plainColors)).toMatchSnapshot(); - }); - - it("renders the footer in verbose mode (no hint)", () => { - expect(ui.footer(plainColors, { verbose: true })).toMatchSnapshot(); - }); - - describe("renderEnvinfo", () => { - it("renders `info`-style output into aligned sections", () => { - const raw = [ - "", - " System:", - " OS: Linux 6.0 Ubuntu", - " CPU: (4) x64 Intel", - " Memory: 1.00 GB / 2.00 GB", - " Binaries:", - " Node: 1.2.3 - /usr/bin/node", - " npm: 4.5.6 - /usr/bin/npm", - "", - ].join("\n"); - - expect(ui.renderEnvinfo(plainColors, raw)).toMatchSnapshot(); - }); - - it("renders `version`-style output with resolved arrows", () => { - const raw = [ - "", - " Packages:", - " webpack: ^5.0.0 => 5.1.2 ", - " webpack-cli: ^6.0.0 => 6.1.0 ", - "", - ].join("\n"); - - expect(ui.renderEnvinfo(plainColors, raw)).toMatchSnapshot(); - }); - - it("falls back to N/A for empty values", () => { - const raw = [" System:", " OS: ", ""].join("\n"); - - expect(ui.renderEnvinfo(plainColors, raw)).toMatchSnapshot(); - }); - }); -}); diff --git a/test/version/__snapshots__/output.test.js.snap.webpack5 b/test/version/__snapshots__/output.test.js.snap.webpack5 new file mode 100644 index 00000000000..1381f14aac2 --- /dev/null +++ b/test/version/__snapshots__/output.test.js.snap.webpack5 @@ -0,0 +1,26 @@ +// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing + +exports[`'-o, --output ' usage gets info text by default: stdout 1`] = ` +" + ⬡ webpack version + ──────────────────────────────────────────────────────────────────────── + Installed package versions. + + + ⬡ Packages: + ──────────────────────────────────────────────────────────────────────── + css-loader: ^x.x.x → x.x.x + eslint-config-webpack: ^x.x.x → x.x.x + sass-loader: ^x.x.x → x.x.x + style-loader: ^x.x.x → x.x.x + ts-loader: ^x.x.x → x.x.x + webpack: ^x.x.x → x.x.x + webpack-bundle-analyzer: ^x.x.x → x.x.x + webpack-dev-server: ^x.x.x → x.x.x + ──────────────────────────────────────────────────────────────────────── + ℹ 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" +`; diff --git a/test/version/output.test.js b/test/version/output.test.js index cfc1d9b5e98..837b21756c0 100644 --- a/test/version/output.test.js +++ b/test/version/output.test.js @@ -1,7 +1,7 @@ "use strict"; const { join } = require("node:path"); -const { run } = require("../utils/test-utils"); +const { normalizeStdout, run } = require("../utils/test-utils"); describe("'-o, --output ' usage", () => { it("gets info text by default", async () => { @@ -10,6 +10,8 @@ describe("'-o, --output ' usage", () => { expect(exitCode).toBe(0); expect(stderr).toBeFalsy(); expect(stdout).toContain("webpack:"); + // Snapshot the framed, branded output so the styled layout stays visible. + expect(normalizeStdout(stdout)).toMatchSnapshot("stdout"); }); it("gets info as json", async () => { From c82457ea7d8ad47b192a9546f55a99e7582e9a32 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 17 Jun 2026 21:35:41 +0000 Subject: [PATCH 5/5] feat(cli): add status icons to webpack-cli's own log messages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Prefix every webpack-cli logger message with a status icon — ✔ success, ✖ error, ⚠ warning, ℹ info — so build, serve and all other commands share the same visual language as the framed help/info/version/configtest screens. The icon sits between the existing `[webpack-cli]` prefix and the unchanged message text, so this is non-breaking: webpack's own `stats.toString()` / `--json` output and webpack-dev-server's messages are untouched, the `[webpack-cli]` prefix is preserved, and tooling that greps the prefix or the message text keeps working. Snapshots updated to include the icons. Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_012j95RhPtEkRKfzDM4JEhdS --- packages/webpack-cli/src/webpack-cli.ts | 12 +- .../config-array-error.test.js.snap.webpack5 | 2 +- .../config-error.test.js.snap.webpack5 | 2 +- ...output-named-bundles.test.js.snap.webpack5 | 4 +- .../__snapshots__/stats.test.js.snap.webpack5 | 8 +- .../target-flag.test.js.snap.webpack5 | 8 +- .../unknown.test.js.snap.webpack5 | 106 +++++++++--------- .../with-config-path.test.js.snap.webpack5 | 4 +- .../help.test.js.snap.devServer5.webpack5 | 60 +++++----- ...rve-basic.test.js.snap.devServer5.webpack5 | 12 +- ...id-schema.test.js.snap.devServer5.webpack5 | 10 +- 11 files changed, 116 insertions(+), 112 deletions(-) diff --git a/packages/webpack-cli/src/webpack-cli.ts b/packages/webpack-cli/src/webpack-cli.ts index 9be2841b29b..58f9521dde8 100644 --- a/packages/webpack-cli/src/webpack-cli.ts +++ b/packages/webpack-cli/src/webpack-cli.ts @@ -578,11 +578,15 @@ class WebpackCLI { } getLogger(): Logger { + // Status icons brand every webpack-cli message (`✔`/`✖`/`⚠`/`ℹ`). They sit + // between the `[webpack-cli]` prefix and the unchanged message text, so + // tooling that greps the prefix or the message keeps working, and they + // collapse to plain glyphs when colors are disabled. return { - error: (val) => console.error(`[webpack-cli] ${this.colors.red(util.format(val))}`), - warn: (val) => console.warn(`[webpack-cli] ${this.colors.yellow(val)}`), - info: (val) => console.info(`[webpack-cli] ${this.colors.cyan(val)}`), - success: (val) => console.log(`[webpack-cli] ${this.colors.green(val)}`), + error: (val) => console.error(`[webpack-cli] ${this.colors.red(`✖ ${util.format(val)}`)}`), + warn: (val) => console.warn(`[webpack-cli] ${this.colors.yellow(`⚠ ${val}`)}`), + info: (val) => console.info(`[webpack-cli] ${this.colors.cyan(`ℹ ${val}`)}`), + success: (val) => console.log(`[webpack-cli] ${this.colors.green(`✔ ${val}`)}`), log: (val) => console.log(`[webpack-cli] ${val}`), raw: (val) => console.log(val), }; diff --git a/test/build/config/error-array/__snapshots__/config-array-error.test.js.snap.webpack5 b/test/build/config/error-array/__snapshots__/config-array-error.test.js.snap.webpack5 index dd676a98905..d9b40a421fb 100644 --- a/test/build/config/error-array/__snapshots__/config-array-error.test.js.snap.webpack5 +++ b/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: /test/build/config/error-array/webpack.config.js:8 target: 'node'; // error eslint-ignore diff --git a/test/build/config/error-commonjs/__snapshots__/config-error.test.js.snap.webpack5 b/test/build/config/error-commonjs/__snapshots__/config-error.test.js.snap.webpack5 index 677c4287467..c4571ed4e2f 100644 --- a/test/build/config/error-commonjs/__snapshots__/config-error.test.js.snap.webpack5 +++ b/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 '/test/build/config/error-commonjs/syntax-error.js' config +"[webpack-cli] ✖ Failed to load '/test/build/config/error-commonjs/syntax-error.js' config ▶ ESM (\`import\`) failed: /test/build/config/error-commonjs/syntax-error.js:4 target: 'node'; //SyntaxError: diff --git a/test/build/output/__snapshots__/output-named-bundles.test.js.snap.webpack5 b/test/build/output/__snapshots__/output-named-bundles.test.js.snap.webpack5 index dcdaaf05196..f110e19b9f0 100644 --- a/test/build/output/__snapshots__/output-named-bundles.test.js.snap.webpack5 +++ b/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 ' argument missing -[webpack-cli] Run 'webpack --help' to see available commands and options" +"[webpack-cli] ✖ Error: Option '-o, --output-path ' 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`] = `""`; diff --git a/test/build/stats/flags/__snapshots__/stats.test.js.snap.webpack5 b/test/build/stats/flags/__snapshots__/stats.test.js.snap.webpack5 index 157da2650f0..38c498961cc 100644 --- a/test/build/stats/flags/__snapshots__/stats.test.js.snap.webpack5 +++ b/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`] = `""`; diff --git a/test/build/target/flag-test/__snapshots__/target-flag.test.js.snap.webpack5 b/test/build/target/flag-test/__snapshots__/target-flag.test.js.snap.webpack5 index 0b5bc12625e..14892170f26 100644 --- a/test/build/target/flag-test/__snapshots__/target-flag.test.js.snap.webpack5 +++ b/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. diff --git a/test/build/unknown/__snapshots__/unknown.test.js.snap.webpack5 b/test/build/unknown/__snapshots__/unknown.test.js.snap.webpack5 index 7ccf7eb98f1..158386643fe 100644 --- a/test/build/unknown/__snapshots__/unknown.test.js.snap.webpack5 +++ b/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`] = `""`; diff --git a/test/configtest/with-config-path/__snapshots__/with-config-path.test.js.snap.webpack5 b/test/configtest/with-config-path/__snapshots__/with-config-path.test.js.snap.webpack5 index d3888fbc8ac..9bf5b7c03d9 100644 --- a/test/configtest/with-config-path/__snapshots__/with-config-path.test.js.snap.webpack5 +++ b/test/configtest/with-config-path/__snapshots__/with-config-path.test.js.snap.webpack5 @@ -1,11 +1,11 @@ // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing -exports[`'configtest' command with the configuration path option should throw error if configuration does not exist: stderr 1`] = `"[webpack-cli] Failed to load './a.js' config"`; +exports[`'configtest' command with the configuration path option should throw error if configuration does not exist: stderr 1`] = `"[webpack-cli] ✖ Failed to load './a.js' config"`; exports[`'configtest' command with the configuration path option should throw error if configuration does not exist: stdout 1`] = `""`; exports[`'configtest' command with the configuration path option should throw syntax error: stderr 1`] = ` -"[webpack-cli] Failed to load './syntax-error.config.js' config +"[webpack-cli] ✖ Failed to load './syntax-error.config.js' config ▶ ESM (\`import\`) failed: /test/configtest/with-config-path/syntax-error.config.js:5 target: 'node'; diff --git a/test/help/__snapshots__/help.test.js.snap.devServer5.webpack5 b/test/help/__snapshots__/help.test.js.snap.devServer5.webpack5 index 2b7123476c6..0619097450d 100644 --- a/test/help/__snapshots__/help.test.js.snap.devServer5.webpack5 +++ b/test/help/__snapshots__/help.test.js.snap.devServer5.webpack5 @@ -1,91 +1,91 @@ // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing exports[`help should log error for invalid command using command syntax #3: stderr 1`] = ` -"[webpack-cli] Incorrect use of help -[webpack-cli] Please use: 'webpack help [command] [option]' | 'webpack [command] --help' -[webpack-cli] Run 'webpack --help' to see available commands and options" +"[webpack-cli] ✖ Incorrect use of help +[webpack-cli] ✖ Please use: 'webpack help [command] [option]' | 'webpack [command] --help' +[webpack-cli] ✖ Run 'webpack --help' to see available commands and options" `; exports[`help should log error for invalid command using command syntax #3: stdout 1`] = `""`; exports[`help should log error for invalid command using command syntax #4: stderr 1`] = ` -"[webpack-cli] Incorrect use of help -[webpack-cli] Please use: 'webpack help [command] [option]' | 'webpack [command] --help' -[webpack-cli] Run 'webpack --help' to see available commands and options" +"[webpack-cli] ✖ Incorrect use of help +[webpack-cli] ✖ Please use: 'webpack help [command] [option]' | 'webpack [command] --help' +[webpack-cli] ✖ Run 'webpack --help' to see available commands and options" `; exports[`help should log error for invalid command using command syntax #4: stdout 1`] = `""`; exports[`help should log error for invalid command using the "--help" option #2: stderr 1`] = ` -"[webpack-cli] Incorrect use of help -[webpack-cli] Please use: 'webpack help [command] [option]' | 'webpack [command] --help' -[webpack-cli] Run 'webpack --help' to see available commands and options" +"[webpack-cli] ✖ Incorrect use of help +[webpack-cli] ✖ Please use: 'webpack help [command] [option]' | 'webpack [command] --help' +[webpack-cli] ✖ Run 'webpack --help' to see available commands and options" `; exports[`help should log error for invalid command using the "--help" option #2: stdout 1`] = `""`; exports[`help should log error for invalid command using the "--help" option #3: stderr 1`] = ` -"[webpack-cli] Incorrect use of help -[webpack-cli] Please use: 'webpack help [command] [option]' | 'webpack [command] --help' -[webpack-cli] Run 'webpack --help' to see available commands and options" +"[webpack-cli] ✖ Incorrect use of help +[webpack-cli] ✖ Please use: 'webpack help [command] [option]' | 'webpack [command] --help' +[webpack-cli] ✖ Run 'webpack --help' to see available commands and options" `; exports[`help should log error for invalid command using the "--help" option #3: stdout 1`] = `""`; -exports[`help should log error for invalid command using the "--help" option: stderr 1`] = `"[webpack-cli] Unknown value for '--help' option, please use '--help=verbose'"`; +exports[`help should log error for invalid command using the "--help" option: stderr 1`] = `"[webpack-cli] ✖ Unknown value for '--help' option, please use '--help=verbose'"`; exports[`help should log error for invalid command using the "--help" option: stdout 1`] = `""`; -exports[`help should log error for invalid flag with the "--help" option #2: stderr 1`] = `"[webpack-cli] Unknown value for '--help' option, please use '--help=verbose'"`; +exports[`help should log error for invalid flag with the "--help" option #2: stderr 1`] = `"[webpack-cli] ✖ Unknown value for '--help' option, please use '--help=verbose'"`; exports[`help should log error for invalid flag with the "--help" option #2: stdout 1`] = `""`; -exports[`help should log error for invalid flag with the "--help" option #3 1`] = `"[webpack-cli] Unknown value for '--help' option, please use '--help=verbose'"`; +exports[`help should log error for invalid flag with the "--help" option #3 1`] = `"[webpack-cli] ✖ Unknown value for '--help' option, please use '--help=verbose'"`; exports[`help should log error for invalid flag with the "--help" option #4 1`] = ` -"[webpack-cli] Can't find and load command 'unknown' -[webpack-cli] Run 'webpack --help' to see available commands and options" +"[webpack-cli] ✖ Can't find and load command 'unknown' +[webpack-cli] ✖ Run 'webpack --help' to see available commands and options" `; exports[`help should log error for invalid flag with the "--help" option: stderr 1`] = ` -"[webpack-cli] Incorrect use of help -[webpack-cli] Please use: 'webpack help [command] [option]' | 'webpack [command] --help' -[webpack-cli] Run 'webpack --help' to see available commands and options" +"[webpack-cli] ✖ Incorrect use of help +[webpack-cli] ✖ Please use: 'webpack help [command] [option]' | 'webpack [command] --help' +[webpack-cli] ✖ Run 'webpack --help' to see available commands and options" `; exports[`help should log error for invalid flag with the "--help" option: stdout 1`] = `""`; exports[`help should log error for unknown command using command syntax #2: stderr 1`] = ` -"[webpack-cli] Can't find and load command 'verbose' -[webpack-cli] Run 'webpack --help' to see available commands and options." +"[webpack-cli] ✖ Can't find and load command 'verbose' +[webpack-cli] ✖ Run 'webpack --help' to see available commands and options." `; exports[`help should log error for unknown command using command syntax #2: stdout 1`] = `""`; exports[`help should log error for unknown command using command syntax: stderr 1`] = ` -"[webpack-cli] Can't find and load command 'myCommand' -[webpack-cli] Run 'webpack --help' to see available commands and options." +"[webpack-cli] ✖ Can't find and load command 'myCommand' +[webpack-cli] ✖ Run 'webpack --help' to see available commands and options." `; exports[`help should log error for unknown command using command syntax: stdout 1`] = `""`; exports[`help should log error for unknown option using command syntax #2: stderr 1`] = ` -"[webpack-cli] Unknown option '--made' -[webpack-cli] Run 'webpack --help' to see available commands and options" +"[webpack-cli] ✖ Unknown option '--made' +[webpack-cli] ✖ Run 'webpack --help' to see available commands and options" `; exports[`help should log error for unknown option using command syntax #2: stdout 1`] = `""`; exports[`help should log error for unknown option using command syntax #3: stderr 1`] = ` -"[webpack-cli] Unknown option '--made' -[webpack-cli] Run 'webpack --help' to see available commands and options" +"[webpack-cli] ✖ Unknown option '--made' +[webpack-cli] ✖ Run 'webpack --help' to see available commands and options" `; exports[`help should log error for unknown option using command syntax #3: stdout 1`] = `""`; exports[`help should log error for unknown option using command syntax #4: stderr 1`] = ` -"[webpack-cli] Can't find and load command 'bui' -[webpack-cli] Run 'webpack --help' to see available commands and options" +"[webpack-cli] ✖ Can't find and load command 'bui' +[webpack-cli] ✖ Run 'webpack --help' to see available commands and options" `; exports[`help should log error for unknown option using command syntax #4: stdout 1`] = `""`; diff --git a/test/serve/basic/__snapshots__/serve-basic.test.js.snap.devServer5.webpack5 b/test/serve/basic/__snapshots__/serve-basic.test.js.snap.devServer5.webpack5 index 4f18e0f6b3e..fcfe51b0fb8 100644 --- a/test/serve/basic/__snapshots__/serve-basic.test.js.snap.devServer5.webpack5 +++ b/test/serve/basic/__snapshots__/serve-basic.test.js.snap.devServer5.webpack5 @@ -1,14 +1,14 @@ // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing exports[`basic serve usage should log an error on unknown flag: stderr 1`] = ` -"[webpack-cli] Error: Unknown option '--unknown-flag' -[webpack-cli] Run 'webpack --help' to see available commands and options" +"[webpack-cli] ✖ Error: Unknown option '--unknown-flag' +[webpack-cli] ✖ Run 'webpack --help' to see available commands and options" `; exports[`basic serve usage should log an error on unknown flag: stdout 1`] = `""`; exports[`basic serve usage should log error on using '--watch' flag with serve: stderr 1`] = ` -"[webpack-cli] No need to use the 'serve' command together with '{ watch: true | false }' or '--watch'/'--no-watch' configuration, it does not make sense. +"[webpack-cli] ⚠ No need to use the 'serve' command together with '{ watch: true | false }' or '--watch'/'--no-watch' configuration, it does not make sense. [webpack-dev-server] Project is running at: [webpack-dev-server] Loopback: http://localhost:/, http://[::1]:/ [webpack-dev-server] On Your Network (IPv4): http://x.x.x.x:/ @@ -17,7 +17,7 @@ exports[`basic serve usage should log error on using '--watch' flag with serve: `; exports[`basic serve usage should log warning on using '-w' alias with serve: stderr 1`] = ` -"[webpack-cli] No need to use the 'serve' command together with '{ watch: true | false }' or '--watch'/'--no-watch' configuration, it does not make sense. +"[webpack-cli] ⚠ No need to use the 'serve' command together with '{ watch: true | false }' or '--watch'/'--no-watch' configuration, it does not make sense. [webpack-dev-server] Project is running at: [webpack-dev-server] Loopback: http://localhost:/, http://[::1]:/ [webpack-dev-server] On Your Network (IPv4): http://x.x.x.x:/ @@ -71,12 +71,12 @@ exports[`basic serve usage should throw error when same ports in multicompiler: [webpack-dev-server] On Your Network (IPv4): http://x.x.x.x:/ [webpack-dev-server] On Your Network (IPv6): http://[x:x:x:x:x:x:x:x]:/ [webpack-dev-server] Content not from webpack is served from '/test/serve/basic/public' directory -[webpack-cli] Error: Unique ports must be specified for each devServer option in your webpack configuration. Alternatively, run only 1 devServer config using the --config-name flag to specify your desired config. +[webpack-cli] ✖ Error: Unique ports must be specified for each devServer option in your webpack configuration. Alternatively, run only 1 devServer config using the --config-name flag to specify your desired config. at stack" `; exports[`basic serve usage should work and log warning on the 'watch' option in a configuration: stderr 1`] = ` -"[webpack-cli] No need to use the 'serve' command together with '{ watch: true | false }' or '--watch'/'--no-watch' configuration, it does not make sense. +"[webpack-cli] ⚠ No need to use the 'serve' command together with '{ watch: true | false }' or '--watch'/'--no-watch' configuration, it does not make sense. [webpack-dev-server] Project is running at: [webpack-dev-server] Loopback: http://localhost:/, http://[::1]:/ [webpack-dev-server] On Your Network (IPv4): http://x.x.x.x:/ diff --git a/test/serve/invalid-schema/__snapshots__/invalid-schema.test.js.snap.devServer5.webpack5 b/test/serve/invalid-schema/__snapshots__/invalid-schema.test.js.snap.devServer5.webpack5 index b53f2dba26b..3901476fa9e 100644 --- a/test/serve/invalid-schema/__snapshots__/invalid-schema.test.js.snap.devServer5.webpack5 +++ b/test/serve/invalid-schema/__snapshots__/invalid-schema.test.js.snap.devServer5.webpack5 @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing exports[`invalid schema should log webpack error and exit process on invalid config: 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.mode should be one of these: "development" | "production" | "none" -> Enable production optimizations or development hints." @@ -10,14 +10,14 @@ exports[`invalid schema should log webpack error and exit process on invalid con exports[`invalid schema should log webpack error and exit process on invalid config: stdout 1`] = `""`; exports[`invalid schema should log webpack error and exit process on invalid flag: stderr 1`] = ` -"[webpack-cli] Invalid value 'Yukihira' for the '--mode' option -[webpack-cli] Expected: 'development | production | none'" +"[webpack-cli] ✖ Invalid value 'Yukihira' for the '--mode' option +[webpack-cli] ✖ Expected: 'development | production | none'" `; exports[`invalid schema should log webpack error and exit process on invalid flag: stdout 1`] = `""`; exports[`invalid schema should log webpack-dev-server error and exit process on invalid config: stderr 1`] = ` -"[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. +"[webpack-cli] ✖ Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options.bonjour should be one of these: boolean | object { … } -> Allows to broadcasts dev server via ZeroConf networking on start. @@ -30,7 +30,7 @@ exports[`invalid schema should log webpack-dev-server error and exit process on exports[`invalid schema should log webpack-dev-server error and exit process on invalid config: stdout 1`] = `""`; exports[`invalid schema should log webpack-dev-server error and exit process on invalid flag: stderr 1`] = ` -"[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. +"[webpack-cli] ✖ Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options.port should be >= 0 and <= 65535." `;