webpack和vite的区别

webpack：

从入口文件开始解析各个模块的依赖关系，非js的文件使用loader解析成js，使用plugin注入钩子，打包合并模块，生成打包文件，然后使用express开启本地服务，浏览器请求打包后的文件。

vite：

使用koa开启本地服务，没有像webpack那样需要解析模块的依赖、打包合并的过程。vite会在浏览器请求需要的模块时，再对模块进行编译。所以vite的启动非常快。

vite的热更新比webpack更快。因为webpack在改动一个模块时候，其他有依赖关系的模块也会重新进行打包。而vite只需重新请求该模块即可。

vite需要浏览器支持ESModule，vite不支持CommonJs

扩展知识 CommonJs 与 ESModule 的区别

1. 模块导入导出语法不同

CommonJs 是通过module.exports，exports导出，require导入；
ESModule 则是export导出，import导入；

2. 导出的不同

CommonJs 导出的是一个值拷贝，一旦内部再修改这个值，则不会同步到外部；
ESModule 导出的是一个引用，内部修改可以同步到外部；

3. 加载的不同

CommonJs 加载的是整个模块，把模块里的所有方法都加载进来；
ESModule 可以按需加载模块内的某个方法