diff --git a/packages/@vue/cli-service/lib/commands/inspect.js b/packages/@vue/cli-service/lib/commands/inspect.js index c805667d6a..2e885e38fe 100644 --- a/packages/@vue/cli-service/lib/commands/inspect.js +++ b/packages/@vue/cli-service/lib/commands/inspect.js @@ -1,44 +1,71 @@ module.exports = (api, options) => { - api.registerCommand('inspect', { - description: 'inspect internal webpack config', - usage: 'vue-cli-service inspect [options] [...paths]', - options: { - '--mode': 'specify env mode (default: development)', - '--rule ': 'inspect a specific module rule', - '--plugin ': 'inspect a specific plugin', - '--rules': 'list all module rule names', - '--plugins': 'list all plugin names', - '--verbose': 'show full function definitions in output' - } - }, args => { - const { get } = require('@vue/cli-shared-utils') - const { toString } = require('webpack-chain') - const config = api.resolveWebpackConfig() - const { _: paths, verbose } = args + api.registerCommand( + 'inspect', + { + description: 'inspect internal webpack config', + usage: 'vue-cli-service inspect [options] [...paths]', + options: { + '--mode': 'specify env mode (default: development)', + '--rule ': 'inspect a specific module rule', + '--plugin ': 'inspect a specific plugin', + '--rules': 'list all module rule names', + '--plugins': 'list all plugin names', + '--verbose': 'show full function definitions in output' + } + }, + args => { + const chalk = require('chalk') + const { get } = require('@vue/cli-shared-utils') + const { toString } = require('webpack-chain') + const config = api.resolveWebpackConfig() + const { _: paths, verbose } = args - let res - if (args.rule) { - res = config.module.rules.find(r => r.__ruleNames[0] === args.rule) - } else if (args.plugin) { - res = config.plugins.find(p => p.__pluginName === args.plugin) - } else if (args.rules) { - res = config.module.rules.map(r => r.__ruleNames[0]) - } else if (args.plugins) { - res = config.plugins.map(p => p.__pluginName || p.constructor.name) - } else if (paths.length > 1) { - res = {} - paths.forEach(path => { - res[path] = get(config, path) - }) - } else if (paths.length === 1) { - res = get(config, paths[0]) - } else { - res = config - } + let res + let hasUnnamedRule + if (args.rule) { + res = config.module.rules.find(r => r.__ruleNames[0] === args.rule) + } else if (args.plugin) { + res = config.plugins.find(p => p.__pluginName === args.plugin) + } else if (args.rules) { + res = config.module.rules.map(r => { + const name = r.__ruleNames ? r.__ruleNames[0] : 'Nameless Rule (*)' + + hasUnnamedRule = hasUnnamedRule || !r.__ruleNames - const output = toString(res, { verbose }) - console.log(output) - }) + return name + }) + } else if (args.plugins) { + res = config.plugins.map(p => p.__pluginName || p.constructor.name) + } else if (paths.length > 1) { + res = {} + paths.forEach(path => { + res[path] = get(config, path) + }) + } else if (paths.length === 1) { + res = get(config, paths[0]) + } else { + res = config + } + + const output = toString(res, { verbose }) + console.log(output) + + // Log explanation for Nameless Rules + if (hasUnnamedRule) { + console.log(`--- ${chalk.green('Footnotes')} ---`) + console.log(`*: ${chalk.green( + 'Nameless Rules' + )} were added through the ${chalk.green( + 'configureWebpack()' + )} API (possibly by a plugin) instead of ${chalk.green( + 'chainWebpack()' + )} (recommended). + You can run ${chalk.green( + 'vue-cli-service inspect' + )} without any arguments to inspect the full config and read these rules' config.`) + } + } + ) } module.exports.defaultModes = {