先说说webpack
从本质上来讲,webpack是一个现代的JavaScript应用的静态模块打包工具,其实重点就是 跟
,他依赖于node
- 模块
前端模块化是指:前端的js,css,图片,json文件,还有一些其他的静态资源可以当成模块来进行使用,还有就是处理模块之前的依赖,比如scss转css(sass-loader,同时sass-loader依赖node-sass),es6转es5,typescript转javascript,.vue文件编译成普通的javascript(vue-loader 是一个Webpack的加载器)图片压缩,预处理等等都是webpack的功能。 - 打包
webpack帮我们处理好了模块跟模块之间的复杂关系,打包就是将webpack所有的资源打包合并成一个或者多个bundle - webpack的配置 ,所以webpack只是一个模块化跟打包的前端工具,你可以用他来配置vue,也可以用来配置react native,angular,关键是去学习webpack的loader(自己要去熟悉每个解析器有哪些作用需要配置哪些laoder),plugins,以及enter,output
vue-cli
- 官方提供的模块化跟打包的工具,本质还是基于node.js+webpack 封装的一个命令行以及可视化工具.原本执行serve跟build,是需要webpack做的,原本是要自己配置webpack的一些相关操作,被vue-cli简化了,并且按照vue的用户习惯整理了一套构建跟用户习惯。
vite
1.一个更加轻量的脚手架项目,(热更新速度快打包构建速度快)
- 相对于vue-cli 默认安装的插件少,随着不断开发,需要自己配置的插件也越来越多
- vite 不是基于webpack的,他有自己的开发服务,利用浏览器的中原生es模块,这种架构是vite比vue-cli快了几个数量级,vite采用rollup进行构建,而是专注于提供一个快速的开发服务器跟构建服务。
- 处于测试阶段,仅支持vue3.0,也不支持commjs模块,最小的脚手架不包括vue想,跟vueRouter