fix(cli-service): inspect --rules (close #3334) (#3378)

Author: LinusBorg

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 <ruleName>': 'inspect a specific module rule',
-      '--plugin <pluginName>': '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 <ruleName>': 'inspect a specific module rule',
+        '--plugin <pluginName>': '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 = {