Vue/cli vs Vite

Vue cli 的功能

  • 工程脚手架
  • 开发服务器
  • 插件系统
  • 用户UI界面 vue ui

Vue cli 构建是基于 webpack 。主要耗时都在webpack的性能上；

webpack是打包工具，babel是编译工具，loader是打包方案

Vite 脚手架

利用浏览器的 原生ES模块 基于 Rollup 进行构建；不需要babel

处于测试阶段，不是一体化的工具。是一个快速地开发服务器和简单的 构建工具

webpack, loader, babel以及webpack与babel-loader的关系

我们新建一个项目，会先预置webpack，然后配置babel。

  • webpack

    webpack是一个现代JS应用程序的静态模块打包器（项目打包）

  • loader（webpack核心之一）

    loader是打包方案，webpack不能识别非js结尾的模块（.css .less .sass .vue），loader告知webpack某些特定文件如何打包。官网有laoder，可以在webpack.config.js中配置

  • babel

    babel是一个JS转码编译器。把浏览器不认识的语法，编译成浏览器认识的语法

  • babel-loader（loader之一）

    用来连接webpack使用babel的加载器

三者的关系

webpack配合babel使用; (webpack主要是打包工具，不能将ES6写法转为其他兼容的浏览器编译的ECMAscript，如新增的API，webpack本身是能处理简单的js文件的，真正将ES6转码的还是babel，所以还是需要安装babel的）

  • babel 是编译工具，把js高级语言转换成浏览器能识别的js语言。
  • webpack 是打包工具，定义入口文件，将所有模块引入整理后，通过 loader 和 plugin 处理后，打包输出。
  • loader让webpack也能够去处理那些非js文件的模块（如ES6新增的API，webpack本身是能处理简单的js文件）
  • webpack 通过 babel-loader 使用 babel 。

原文链接：https://blog.csdn.net/qq_43780814/article/details/115254505