使用vue create vue（基于webpack）创建的vue项目和使用npm init vue@latest（基于vite）的区别是什么？

目录

一、配置文件

二、构建速度不同

三、开发模式不同

四、配置复杂度不同

五、插件生态不同

六、编译方式不同

七、应用场景不同

借鉴文章：vite和webpack的区别

一、配置文件

首先是配置文件的不同，基于webpack的配置文件是

// webpack.config.js

基于vite的配置文件：

// vite.config.ts

二、构建速度不同

Webpack: Webpack的构建速度相对较慢，尤其在大型项目中，因为它需要分析整个依赖图，进行多次文件扫描和转译。
Vite: Vite以开发模式下的极速构建著称。它利用ES模块的特性，只有在真正需要时才编译文，而不是整个项目。这使得它在开发环境下几乎是即时的。

三、开发模式不同

Webpack: Webpack通常使用热模块替换（HMR）来实现快速开发模式，但配置相对复杂。
Vite: 采用了基于ES Module的开发服务器，只有在需要时才会编译对应的模块，大幅度提升