vue-cli生成的webpack配置与手动配置有何区别，Vue开发者更推荐哪种方式？

两种配置方式的其他核心区别 #

除了你提到的构建脚本、配置文件写法差异外，还有几个核心差异：

• 内置配置完善度不同
  vue-cli 对webpack做了上层封装，默认内置了绝大多数业务场景需要的配置：包括ES6+转译、CSS预处理器支持、静态资源（图片/字体）处理、开发服务器热更新、生产环境自动优化（代码压缩、Tree Shaking、公共代码拆分、缓存策略）等，不需要你额外手动配置。而原生webpack手动配置需要自己安装所有对应loader、plugin，逐个补全规则，漏配任何一项都会导致打包报错。
• 维护成本不同
  vue-cli 是Vue官方维护的工具，会自动处理webpack、各类loader、plugin之间的版本兼容问题，后续升级也只需要升级@vue/cli-service版本即可。手动配置需要自己跟进所有依赖的版本更新、排查兼容性问题，维护成本高很多。
• 扩展能力的差异
  vue-cli 有官方插件生态，需要添加ESLint校验、单元测试、PWA支持、TS支持等能力时，直接运行vue add [插件名]就能自动完成配置接入。手动配置需要自己安装对应依赖、修改webpack配置、调整配套规则。
• 问题排查成本不同
  vue-cli 是标准化的工程方案，社区使用量大，遇到问题很容易搜到对应解决方案；手动配置如果是自己定制的逻辑，出了问题只能从webpack底层逻辑开始排查，门槛高很多。

主流使用建议 #

分场景选择即可：

1. 常规业务开发、新手学习阶段，优先推荐用vue-cli的方式。不需要在工程化配置上投入不必要的精力，只需要在有自定义构建需求时通过configureWebpack或者chainWebpack扩展配置即可，能把更多精力放在业务逻辑开发上。
2. 如果你需要深入学习webpack原理，或者项目有非常特殊的定制化构建需求（比如自研的代码转译规则、特殊的多入口打包逻辑等），再选择手动配置webpack的方式。

补充：当前Vue3生态更推荐的官方构建工具是Vite，只有当你有必须依赖webpack的场景时再选择上面的webpack相关方案。

内容的提问来源于stack exchange，提问作者CCCC