webpack 原理图
vite 原理图
简介：
webpack的打包主要依赖于 CommonJs ，vite是 esModule 为主；且vite充分利用 esbuild (更快的打包)和 rollup (合理的插件系统设计)这些当代先进工具。
CommonJs可以实现的功能esModule都可以实现，并且，相较于前者，esModule的优点有：
1. 支持并行导入和动态导入
2. ES Module 是 JavaScript 的官方模块标准，现代浏览器原生支持，无需额外的工具或转换器。
3. ES Module 在导入语句中进行静态分析，这意味着模块的依赖关系在编译时就已经确定，可以进行更多的优化和分析。
webpack是将所有module打包成一个bundle，vite是按需引入module；所以前端项目服务器启动和重启更快速。感觉vite是一个充满活力的青年人，其设计模式合理且新潮；只是存在的时间没有webpack那么长，其社区解决方案，对于各个插件的支持，可配置性(但vite配置更简单，不冗余)不如webpack。但这些都是新框架必然会有的问题。
所以，vite确实是现在最先进最合理的web项目开发和打包环境。
vite和webpack的讨论
vite中的常用配置
-
和css相关的配置
- css.preprocessorOptions: 这些配置会传递到scss等预处理器的执行参数中去
- css.postcss：也是用来处理 CSS 的，只不过它更像是一个工具箱，可以添加插件
-
resolve 配置项
- resolve.alias： 配置别名
- resolve.extensions(array)： 可以省略的import 文件后缀(类型名)
-
是否开启强制依赖预构建 - optimizeDeps.force
- node_modules 中的依赖模块构建过一次就会缓存在 node_modules/.vite/deps 文件夹下，下一次会直接使用缓存的文件。而有时候我们想要修改依赖模块的代码，做一些测试或者打个补丁，这时候就要用到强制依赖预构建。
-
服务器 server 相关的配置（判断环境使用import.meta.env.xxx 而不是 process.env.NODE_ENV）
- server.host: 默认是localhost
- server.proxy：反向代理，通常用于解决跨域问题
-
build打包相关
- build.outdir：指定打包文件的输出目录。默认值为 dist
- build.assetsDir：指定生成静态资源的存放目录。默认值为 assets
- build.assetsInlineLimit：图片转 base64 编码的阈值。为防止过多的 http 请求
- plugins - 让我们可以使用官方插件，也可以社区插件。
