初始化React应用该选webpack还是create-react-app？

选型判断逻辑 #

直接按你的项目阶段和需求选就行，没有绝对的好坏：

• 选create-react-app（以下简称CRA）的场景：
  • React初学者，还没搞懂构建相关概念，想最快跑出第一个可运行的React项目
  • 做快速验证的Demo、小型活动页、内部小工具，不需要对构建流程做特殊调整
  • 小团队没人专职维护构建配置，想要开箱即用的热更新、JSX转译、生产环境压缩、静态资源处理能力，一行npx create-react-app my-app就能直接进开发，不用花时间调配置
• 选手动webpack搭建的场景：
  • 中大型正式项目，对构建速度、产物体积有明确的考核要求
  • 项目有定制化构建需求，比如要接特殊的编译规则、微前端、SSR同构等能力
  • 团队有能力维护构建配置，想要完全掌控构建全流程的逻辑

相较于CRA，手动搭建webpack React项目的核心优势 #

• 没有配置黑盒，完全可控
  CRA默认把所有webpack、babel相关的配置封装在底层依赖里，普通开发看不到也改不了，要改配置要么走eject弹出不可逆的全量配置，要么靠第三方覆写插件绕一层才能改规则，排查构建问题的时候特别费劲。手动搭的webpack项目从入口配置、loader规则、插件逻辑到输出策略全是自己写的，任何构建环节出问题、要加能力都能直接定位到配置项修改，没有额外的适配成本。
• 构建优化上限更高
  CRA的优化策略是面向所有通用场景做的平衡配置，没法适配每个项目的具体情况。手动配webpack可以根据自己项目的依赖情况、业务场景做针对性调优：比如给大项目开启持久化缓存提升二次构建速度、按业务模块的更新频率自定义代码分割规则、精准配置polyfill和按需引入逻辑减少冗余代码、针对静态资源做适配项目的压缩/转码策略，最终的构建速度和产物体积表现通常会比默认CRA项目好不少。
• 依赖更精简，没有冗余
  CRA为了覆盖绝大多数用户的需求，内置了大量很多项目根本用不上的loader、插件和编译规则，刚初始化的空项目node_modules体积动辄两三百兆。手动搭webpack可以按需安装依赖，比如项目不需要处理Less就不用装less-loader，不需要装饰器语法就不装对应的babel插件，空项目的依赖体积能压到CRA的三分之一以下，安装依赖、启动构建的速度都会更快。
• 对特殊业务场景的适配性更强
  如果你要做SSR服务端渲染、微前端主/子应用接入、跨端同构、自定义构建时埋点插桩、产物合规校验这类特殊需求，CRA的默认配置基本没法直接支撑，硬改CRA配置的成本往往比从头搭一套适配业务的webpack配置还高。

小提醒：如果是刚接触React的新手，别一上来就硬啃webpack配置，先用CRA把React本身的语法、组件逻辑、生态用法摸熟，等实际开发中遇到CRA解决不了的构建痛点时，再尝试手动搭webpack就行，没必要为了"显得专业"平白增加前期的学习成本。

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