首先，请记住：
它在新版本的脚手架项目里面非常重要
它有什么用呢？
inspect internal webpack config
能快速地在控制台看到对应生成的 webpack 配置对象。
首先它是 vue 的一个扩展命令，在文件 @vue/cli/bin/vue.js 中定义了 command
还是依赖了工具包 commander
const program = require(‘commander‘)代码配置如下：
program
.command(‘inspect [paths...]‘)
.description(‘inspect the webpack config in a project with vue-cli-service‘)
.option(‘--mode <mode>‘)
.option(‘--rule <ruleName>‘, ‘inspect a specific module rule‘)
.option(‘--plugin <pluginName>‘, ‘inspect a specific plugin‘)
.option(‘--rules‘, ‘list all module rule names‘)
.option(‘--plugins‘, ‘list all plugin names‘)
.option(‘-v --verbose‘, ‘Show full function definitions in output‘)
.action((paths, cmd) => {
require(‘../lib/inspect‘)(paths, cleanArgs(cmd))
})这里的 option 比较多：
- mode
- rule
- plugin
- rules
- plugins
- verbose
在前面的文章中，我们比较常用的有 rule 相关的
再接着看一下 lib/inspect.js 文件：接受 2 个参数：
- paths
- args
module.exports = function inspect (paths, args) {
}核心还是找到 @vue/cli-service，先获取当前执行命令的目录：
const cwd = process.cwd()
let servicePath = resolve.sync(‘@vue/cli-service‘, { basedir: cwd })最终执行了 node ***/node_modules/@vue/cli-service/bin/vue-cli-service.js inspect 再带上参数：
调用了工具包 execa：
const execa = require(‘execa‘)
execa(‘node‘, [
binPath,
‘inspect‘,
...(args.mode ? [‘--mode‘, args.mode] : []),
...(args.rule ? [‘--rule‘, args.rule] : []),
...(args.plugin ? [‘--plugin‘, args.plugin] : []),
...(args.rules ? [‘--rules‘] : []),
...(args.plugins ? [‘--plugins‘] : []),
...(args.verbose ? [‘--verbose‘] : []),
...paths
], { cwd, stdio: ‘inherit‘ })那我们接着往下看，后面就是去 cli-service 目录了：@vue/cli-service/lib/commands/inspect.js
通过 api.registerCommand 来注册一个:
module.exports = (api, options) => {
api.registerCommand(‘inspect‘, {
}, args => {
})
}在回调函数里面会处理之前的 option 传递的参数：
1、处理 rule
if (args.rule) {
res = config.module.rules.find(r => r.__ruleNames[0] === args.rule)
}2、处理 plugin
if (args.plugin) {
res = config.plugins.find(p => p.__pluginName === args.plugin)
}3、处理 rules
if (args.rules) {
res = config.module.rules.map(r => r.__ruleNames[0])
}4、处理 plugins
if (args.plugins) {
res = config.plugins.map(p => p.__pluginName || p.constructor.name)
}其他分支情况比较少用，暂时不做展开。
最后多是通过 webpack-chain 的 toString 函数来生成，最终在控制台打印：
You can inspect the generated webpack config using
config.toString(). This will generate a stringified version of the config with comment hints for named rules, uses and plugins.
const { toString } = require(‘webpack-chain‘)
const output = toString(res, { verbose })来源：https://segmentfault.com/a/1190000016260585
原文地址：https://www.cnblogs.com/lovellll/p/10138800.html