Vue CLI 查看项目 Webpack 配置的方法

vue inspect 查看项目的 webpack 配置开发环境：npx vue-cli-service inspect --mode development >> webpack.config.development.js 生产环境：npx vue-cli-service inspect --mode production >> webpack.config.production.js

npx vue-cli-service 可替换成 vue

在产生的 js 文件开头，添加：module.exports =，然后格式化即可查看。

为什么需要这个命令

Vue CLI 项目里看不到 webpack.config.js，因为整份配置是 @vue/cli-service 在运行时用 webpack-chain 拼出来的：先由 CLI 内置的一堆 preset（config/base.js、config/css.js、config/prod.js 等）叠加，再叠上你安装的每个 CLI 插件的修改，最后才轮到 vue.config.js 里的 configureWebpack / chainWebpack。

这个链条一长，「我在 vue.config.js 里改的东西到底生效了没、生效成了什么样」就完全靠猜。inspect 的作用就是把 webpack-chain 最终 toConfig() 出来的对象序列化打印出来，让你看到真正交给 webpack 的那份配置。

>> 是追加重定向，反复执行会把内容叠在一起。我一般用 > 覆盖，避免看到拼在一起的两份配置：

npx vue-cli-service inspect --mode development > webpack.dev.js
npx vue-cli-service inspect --mode production > webpack.prod.js

只看某一部分

整份配置动辄上千行，直接翻很累。inspect 支持传路径参数，只输出配置对象的某个子树：

# 只看所有 loader 规则
npx vue-cli-service inspect module.rules

# 只看第 3 条规则（数组下标从 0 开始）
npx vue-cli-service inspect module.rules.3

# 只看插件列表
npx vue-cli-service inspect plugins

# 只看输出配置
npx vue-cli-service inspect output

# 只看 devServer
npx vue-cli-service inspect devServer

# 只看别名
npx vue-cli-service inspect resolve.alias

排查 loader 问题时 module.rules 是最常用的。想知道 .scss 文件到底过了几层 loader、sass-loader 拿到的选项是什么，直接看这一段就够了。

还有两个有用的参数：

# 输出可直接 require 的合法 JS（自动补 module.exports）
npx vue-cli-service inspect --mode production --verbose

# 输出规则和插件的名字列表，用来给 chainWebpack 定位
npx vue-cli-service inspect --rules
npx vue-cli-service inspect --plugins

--rules 和 --plugins 我用得最多。因为 chainWebpack 里操作规则必须用名字：

// vue.config.js
module.exports = {
  chainWebpack(config) {
    // 'svg' 这个名字就是从 inspect --rules 里查出来的
    config.module.rule('svg').exclude.add(/src\/icons/);

    // 插件名同理，从 inspect --plugins 里查
    config.plugin('html').tap(args => {
      args[0].title = '自定义标题';
      return args;
    });
  },
};

名字写错不会报错，只会静默不生效——这是 chainWebpack 最坑的地方，inspect --rules 是唯一可靠的对照表。

输出为什么不是合法 JS

原文说要手动加 module.exports =，根本原因是 inspect 默认输出的是 Node 的 util.inspect 格式，为了可读性做了些处理：函数会被打印成 function () { ... } 这种省略形式，正则、Symbol、循环引用也各有特殊表示。所以它是给人看的，不是给机器执行的。

加上 --verbose 之后函数体会完整展开，可读性变差但更接近真实配置。想要能 require 的版本，配合 module.exports = 手动补一下确实是最省事的办法：

{ echo "module.exports ="; npx vue-cli-service inspect --mode production; } > webpack.prod.js
npx prettier --write webpack.prod.js

补完格式化一下，编辑器的语法高亮和折叠就都能用了，翻起来舒服很多。

别把导出的文件提交进仓库

这个文件是快照，只反映生成它那一刻的配置。之后改了 vue.config.js 或者装了新插件，它就过期了，但看起来没有任何区别。我见过因为翻了一份半年前导出的配置而排查方向完全跑偏的情况，所以它应该被当成临时产物：

webpack.*.js

Vite 项目怎么看

Vue CLI 之后的项目基本都转 Vite 了，没有等价的 inspect 命令，但有两个替代手段：

# 看最终解析出的完整配置（包括所有插件注入的部分）
npx vite --debug config

# 看每个插件对某个文件做了什么转换，排查 transform 链
npx vite --debug plugin-transform

或者在 vite.config.js 里直接打印，因为 Vite 的配置就是普通 JS 对象，不存在被隐藏的部分：

export default defineConfig(env => {
  const config = {
    /* ... */
  };
  console.log(JSON.stringify(config, null, 2));
  return config;
});

这也是 Vite 相比 Vue CLI 在调试上的一个实际优势——配置是显式的，不需要专门的命令去反查。