这是青训营关于webpack、vite的相关笔记

什么是webpack

webpack本质上是一种前端资源编译、打包工具。

webpack被定义为现代 JavaScript 应用程序的静态模块打包器(module bundler)，是目前最为流行的JavaScript打包工具之一。

webpack会以一个或多个js文件为入口，递归检查每个js模块的依赖，从而构建一个依赖关系图(dependency graph)，然后依据该关系图，将整个应用程序打包成一个或多个bundle。

由于webpack是用nodejs编写的，所以它依赖的运行环境就是nodejs。 Webpack 的主要特点是支持各种复杂的构建场景，例如代码分割、按需加载等，但也因此导致配置复杂，打包速度较慢。

什么是vite

Vite是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）
• 一套构建指令，它使用Rollup打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源

webpack 和 vite 的区别

• 基础概念不同；

• 编译方式不同；

• 开发效率不同；

• 扩展性不同；

• 应用场景不同。

webpack的优点

• 因为webpack可以在浏览器不支持es6的情况下让你使用es6语法，最新的webpack版本已经不需要配置也能过变异es6语法，之前的版本都需要加入babel加载器才可以打包es6.
• 减少界面请求数量。

vite的优点

• 极速的服务启动。 使用原生ESM文件，无需打包
• 轻量快速的热重载 无论应用程序大小如何，都始终极快的模块热替换（HMR）
• 丰富的功能 对TS、JSX、CSS等支持开箱即用
• 优化的构建 可选“多页应用”或“库”模式的预配置RollUp构建
• 通用的插件 在开发和构建之间共享Rollup-superset插件接口
• 完全类型化的API 灵活的API和完整TS类型