浏览器他只认识html, css, js
如果遇到ts文件我们需要使用tsc将typescript代码转换为js代码
有一个东西能够帮你把tsc, react-compiler, less, babel, uglifyjs全部集成到一起,我们只需要关心我们写的代码就好了
构建工具他让我们可以不用每次都关心我们的代码在浏览器如何运行, 我们只需要首次给构建工具提供一个配置文件(这个配置文件也不是必须的, 如果你不给他 他会有默认的帮你去处理),
有了这个集成的配置文件以后, 我们就可以在下次需要更新的时候调用一次对应的命令就好了, 如果我们再结合热更新, 我们就更加不需要管任何东西, 这就是构建工具去做的东西,
他让我们不用关心生产的代码也不用关心代码如何在浏览器运行, 只需要关心我们的开发怎么写的爽怎么写就好了
因为webpack支持多种模块化, 他一开始必须要统一模块化代码, 所以意味着他需要将所有的依赖全部读一遍
vite则是按需加载
vite会不会直接把webpack干翻, vite是基于es modules的, 侧重点不一样, webpack更多的关注兼容性, 而vite关注浏览器端的开发体验
yarn create vite
以上命令会帮我们全局安装一个东西: create-vite (vite的脚手架)
create-vite内置了vite
使用vue-cli 会内置webpack
vue-cli/create-react-app(开发商)给我们提供已经精装修的模板: 帮你把react/vue都下好了, 同时他还帮你把配置调整到了最佳实践
create-vite(开发商)给你一套精装修模板(给你一套预设): 下载vite, vue, post-css, less, babel好了, 并且给你做好了最佳实践的配置