简单聊聊 webpack vue-cli vite

先说说webpack

从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具，其实重点就是 跟 ，他依赖于node

1. 模块
   前端模块化是指：前端的js，css，图片，json文件，还有一些其他的静态资源可以当成模块来进行使用，还有就是处理模块之前的依赖，比如scss转css（sass-loader，同时sass-loader依赖node-sass），es6转es5，typescript转javascript，.vue文件编译成普通的javascript（vue-loader 是一个Webpack的加载器）图片压缩，预处理等等都是webpack的功能。
2. 打包
   webpack帮我们处理好了模块跟模块之间的复杂关系，打包就是将webpack所有的资源打包合并成一个或者多个bundle
3. webpack的配置 ，所以webpack只是一个模块化跟打包的前端工具，你可以用他来配置vue，也可以用来配置react native，angular，关键是去学习webpack的loader（自己要去熟悉每个解析器有哪些作用需要配置哪些laoder），plugins，以及enter，output

vue-cli

1. 官方提供的模块化跟打包的工具，本质还是基于node.js+webpack 封装的一个命令行以及可视化工具.原本执行serve跟build，是需要webpack做的，原本是要自己配置webpack的一些相关操作，被vue-cli简化了，并且按照vue的用户习惯整理了一套构建跟用户习惯。

vite

1.一个更加轻量的脚手架项目，（热更新速度快打包构建速度快）

1. 相对于vue-cli 默认安装的插件少，随着不断开发，需要自己配置的插件也越来越多
2. vite 不是基于webpack的，他有自己的开发服务，利用浏览器的中原生es模块，这种架构是vite比vue-cli快了几个数量级，vite采用rollup进行构建，而是专注于提供一个快速的开发服务器跟构建服务。
3. 处于测试阶段，仅支持vue3.0，也不支持commjs模块，最小的脚手架不包括vue想，跟vueRouter