webpack、vite、vue-cli、create-vue的区别是什么？

  • weechern
  • 前端
  • 2024-04-23
  • 266热度
  • 0评论
脚手架 vue-cli create-vue
构建项目 vite
打包代码 webpack rollup

脚手架：创建项目，选择性安装需要的插件，指定统一的风格，生成demo。

构建项目：建立项目的运行环境，需要手动安装依赖插件

打包代码：代码写好之后，需要部署到生产环境，就需要打包处理

现在是不是有个初步概念了？接着往下看

关于vue-cli(官网)

vue-cli是vue官方早期退出的一款脚手架，使用webpack创建vue项目，可以选择安装需要的各种插件，比如Vuex、VueRouter等。

vue-cli用于创建vue2的项目；@vue/cli用于创建vue3的项目，当然也会向下兼容(不过官方现在不建议使用vue/cli了，而更推荐create-vue+vite的方式。)

使用起来还是较为繁琐的，要先安装脚手架，然后通过 vue create hello-world 命令来创建项目，具体可以查阅官网。

关于create-vue(官网)

create-vue是vue3专用的脚手架，使用vite创建vue3的项目时可以选择安装各种插件，使用更简单。

可以通过 npm init vue@latest 或者 yarn create vue的方式

然后可以根据需要选择各种插件

  • TypeScript
  • JSX Support
  • Vue Router for Single Page Application development
  • Pinia for state management
  • Vitest for Unit testing
  • Cypress for both Unit and End-to-End testing
  • ESLint for code quality
  • Prettier for code formating

关于vite(官网)

Vite（法语意为“快速的”，发音/vit/，发音同“veet”）是一种新型前端构建工具，能够显著提升前端开发体验。他主要有两部分组成：
一个开发服务器，他基于原生ES模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）
一套构建指令，他使用Rollup打包你的代码，并且他是预配置的，可输出用于生产环境的高度优化过的静态资源
vite并不是单单可以创建vue项目，也支持react项目，但是需要手动安装第三方插件，比较麻烦

关于rollup(官网)

rollup是一种打包工具，特点就是打的包非常精简，体积小。官网是英文的，中文资料比较少，常规用法可以参考vite官网

关于webpack

webpack core 是一个纯打包工具，对标rollup，而vite其实是一个更上层的工具链方案，对标的是webpack+web常用配置+webpack-dev-server。
webpack core因为只针对打包没有预设场景，所以设计的极其灵活，不局限于针对web打包，几乎所有可配置环节都做成可配置的，这种灵活度使的在一些特定场景依然无法被替代。但反过来导致的缺点就是配置项极其复杂，插件机制和内部逻辑晦涩难懂，针对常见的web也需要大量配置。
另外大量loader插件虽然单独发布却存在各种隐式耦合，很容易导致配置不当互相影响，对于新手来说，把webpack从零开始配到跟vite一样开箱即用，功能对等的程度是不可能的任务。所以大部分人的公司要么是用基于webpack包一层的脚手架（umi，vue-cli）,或者是专门养一个人称为webpack配置工程师的角色。
总结：webpack是个全能选手，什么都能干，只是有些复杂，对新手不友好，rollup是后起之秀，打包更简洁。vite把rollup变成了开袋即食，方便新手入门。create-vue取代了vue-cli。除非你还想创建vue2的项目