diff --git a/packages/webpack-cli/lib/groups/HelpGroup.js b/packages/webpack-cli/lib/groups/HelpGroup.js index 5e21c3e9ab8..006b1cdebf0 100644 --- a/packages/webpack-cli/lib/groups/HelpGroup.js +++ b/packages/webpack-cli/lib/groups/HelpGroup.js @@ -21,10 +21,10 @@ class HelpGroup { const link = options.link; process.stdout.write(`${header('Usage')}: ${usage}\n`); - process.stdout.write(`${header('Description')}: ${description}\n`); + process.stdout.write(`\n${header('Description')}: ${description}\n`); if (link) { - process.stdout.write(`${header('Documentation')}: ${link}\n`); + process.stdout.write(`\n${header('Documentation')}: ${link}\n`); } if (options.flags) { @@ -103,12 +103,16 @@ class HelpGroup { { header: 'Available Commands', content: options.commands.map((e) => { - return { name: e.name, summary: e.description }; + return { name: e.name, summary: e.shortDesc ? e.shortDesc : e.description }; }), }, { header: 'Options', - optionList: options.core, + optionList: options.core.map((e) => { + const description = e.shortDesc ? e.shortDesc : e.description; + e.description = description; + return e; + }), }, ]); return { diff --git a/packages/webpack-cli/lib/utils/cli-flags.js b/packages/webpack-cli/lib/utils/cli-flags.js index 657897e5a08..289e0d60877 100644 --- a/packages/webpack-cli/lib/utils/cli-flags.js +++ b/packages/webpack-cli/lib/utils/cli-flags.js @@ -1,3 +1,5 @@ +const StatsGroup = require('../groups/StatsGroup'); + const HELP_GROUP = 'help'; const CONFIG_GROUP = 'config'; const BASIC_GROUP = 'basic'; @@ -6,6 +8,13 @@ const ADVANCED_GROUP = 'advanced'; const DISPLAY_GROUP = 'stats'; const ZERO_CONFIG_GROUP = 'zero-config'; +function acceptedString(arr) { + return `Accepted Value: ${arr.join(' | ')}`; +} +function descriptionGenerator(example, shortDesc, acceptedValue = []) { + return `\n\n Example: ${example}\n\n ${acceptedValue.length > 0 ? acceptedString(acceptedValue) : ''}\n\n${shortDesc}`; +} + module.exports = { groups: { HELP_GROUP, @@ -76,7 +85,11 @@ module.exports = { type: String, defaultOption: true, group: BASIC_GROUP, - description: 'The entry point of your application.', + shortDesc: 'The entry point of your application.', + description: descriptionGenerator( + 'webpack --entry index.js', + 'It is the entry point of your application. You can provide multiple entry points also.', + ), link: 'https://webpack.js.org/concepts/#entry', }, { @@ -86,7 +99,11 @@ module.exports = { type: String, defaultValue: null, group: CONFIG_GROUP, - description: 'Provide path to a webpack configuration file', + shortDesc: 'Provide path to a webpack configuration file', + description: descriptionGenerator( + 'webpack-cli --config ./webpack.config.js', + 'It provides path to a webpack configuration file', + ), link: 'https://webpack.js.org/configuration/', }, { @@ -133,15 +150,17 @@ module.exports = { alias: 'o', group: OUTPUT_GROUP, type: String, - description: 'Output location of the file generated by webpack', + shortDesc: 'Output location of the file generated by webpack', + description: descriptionGenerator('webpack --output ./a.js', 'Output location to the file generated by webpack'), link: 'https://webpack.js.org/concepts/#output', }, { name: 'plugin', - usage: '--plugin', + usage: '--plugin e.g. HtmlWebpackPlugin', group: ADVANCED_GROUP, type: String, - description: 'Load a given plugin', + shortDesc: 'Load a given plugin', + description: descriptionGenerator('webpack --plugin ExtractTextWebpackPlugin', 'Load a plugin '), link: 'https://webpack.js.org/plugins/', }, { @@ -150,7 +169,17 @@ module.exports = { alias: 't', type: String, group: ADVANCED_GROUP, - description: 'Sets the build target', + shortDesc: 'Sets the build target', + description: descriptionGenerator('webpack --target node ', 'Instructs webpack to target a specific environment.', [ + 'async-node', + 'electron-main', + 'electron-renderer', + 'electron-preload', + 'node', + 'node-webkit', + 'web', + 'webworker', + ]), link: 'https://webpack.js.org/configuration/target/#target', }, { @@ -247,7 +276,12 @@ module.exports = { type: String, defaultValue: 'normal', group: DISPLAY_GROUP, - description: 'It instructs webpack on how to treat the stats', + shortDesc: 'It instructs webpack on how to treat the stats', + description: descriptionGenerator( + 'npx webpack-cli --stats verbose', + 'These options instructs webpack on how to treat the stats.', + StatsGroup.validOptions(), + ), link: 'https://webpack.js.org/configuration/stats/#stats', }, { diff --git a/test/help/help-flags.test.js b/test/help/help-flags.test.js index 76e0bc05e56..f8d493cd804 100644 --- a/test/help/help-flags.test.js +++ b/test/help/help-flags.test.js @@ -2,6 +2,7 @@ const { run } = require('../utils/test-utils'); const helpHeader = 'The build tool for modern web applications'; +const footer = 'Made with ♥️ by the webpack team'; describe('commands help', () => { it('throws error for invalid flag with --help flag', () => { @@ -27,4 +28,10 @@ describe('commands help', () => { expect(stdout).toContain('webpack --entry e.g. ./src/main.js'); expect(stderr).toHaveLength(0); }); + it('shows accepted value if available for a flag', () => { + const { stdout, stderr } = run(__dirname, ['--help', '--stats'], false); + expect(stdout).toContain(footer); + expect(stdout).toContain('Accepted Value: none | errors-only | minimal | normal | detailed | verbose | errors-warnings'); + expect(stderr).toHaveLength(0); + }); });