webpack、vite、vue-cli、create-vue 的区别

webpack、vite、vue-cli、create-vue 的区别

首先说结论

---

Rollup更适合打包库，webpack更适合打包项目应用，vite基于rollup实现了热更新也适合打包项目。

---

功能	工具	工具
脚手架	vue-cli	create-vue
构建项目		vite
打包代码	webpack	rollup

脚手架:用于初始化，创建项目，选择性安装需要的插件，指定统一的风格，生成demo。
有人帮你把这个开发过程中要用到的工具、环境都配置好了，你就可以方便地直接开始做开发，专注你的业务，而不用再花时间去配置这个开发环境，这个开发环境就是脚手架。
vue-cli/@vue-cli create-vue（vue3专用） vite
构建工具：构建工具用于编译阶段建立项目的运行环境，需要手动安装插件。
Vite webpack
打包工具：代码写好之后，为了更好的使用，需要打包处理一下。
Vite webpack rollup

1.Vue CLI

Vue-cli的包名称由 vue-cli（vue-cli2.x版本） 改成了 @vue/cli（@vue/cli3.x及以上版本）,vue-cli 是 Vue 早期推出的一款脚手架，使用 webpack 创建 Vue 项目，可以选择安装需要的各种插件，比如 Vuex、VueRouter等。

vue-cli 用于创建 vue2 的项目；
@vue/cli 用于创建 vue3 的项目，当然也支持 vue2。

2.create-vue

create-vue 是 Vue3 的专用脚手架，使用 vite 创建 Vue3 的项目，也可以选择安装需要的各种插件，使用更简单。
npm init vue@latest
or
yarn create vue

3.Vite

是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：
①一个开发服务器，它基于原生ES模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。
②一套构建指令，它使用?Rollup?打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

4.Rollup

Rollup 是一个 JavaScript 模块打包工具，可以将多个小的代码片段编译为完整的库和应用。与传统的 CommonJS 和 AMD 这一类非标准化的解决方案不同，Rollup 使用的是 ES6 版本 Javascript 中的模块标准。新的 ES 模块可以让你自由、无缝地按需使用你最喜爱的库中那些有用的单个函数。

5. webpack

是一个用于现代 JavaScript 应用程序的?静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个?依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个?bundles，它们均为静态资源，用于展示你的内容。

6. Webpack和vite的主要区别

6-1. 底层的语言

webpackWebpack 是一个基于打包器的构建工具，同一个入口文件的代码会打包成一个 Bundle 文件。是基于nodejs构建，Webpack基于commonjs，先打包合并然后请求服务器，更改一个模块，其他有依赖关系的模块都会重新打包；js是以毫秒计数。

vite是基于esbulid预构建依赖，esbulid是采用go语言编写的，Vite基于es6module，自动向依赖的module发请求，服务端按需编译返回，改动一个模块仅仅会重新请求该模块；go语言是纳秒级别的。
总结：因为js是毫秒级别，go语言是纳秒级别。所以vite比webpack打包器快10-100倍。

CommonJs和ES6Module的区别

我们都知道在早期JavaScript模块这一概念，都是通过script标签引入js文件代码，无法将一个项目拆分成多个模块文件。当然这写基本简单需求没有什么问题，但当我们的项目越来越庞大时，我们引入的js文件就会越多，这时就会出现以下问题：

• js文件作用域都是顶层，这会造成变量污染
• js文件多，变得不好维护
• js文件依赖问题，稍微不注意顺序引入错，代码全报错

正对这一情况，社区出现了一些统一的规范：CommonJs和AMD，前者是针对服务端的js，也就是nodejs。后者是针对浏览器的。ES6在语言标准层面上，实现了模块功能，而且实现也比较简单。完全可以取代CommonJs和AMD。达成前后端js的模块风格统一。ECMAScript 是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。不过目前还未完全达到这一目的。nodejs目前主流还是采用CommonJS规范。不过在v13.2版本，nodejs已经实现了ES6模块语法，还未正式替换，在考察阶段。v13.2版本将js文件以 .mjs结尾，nodejs将它视为ES6模块。以 .cjs结尾则视为CommonJS模块。也可以在包的package.json文件中增加 “type”: "module"信息。nodejs则将整个包都视为ES6模块来加载运行。

• 两者的模块导入导出语法不同，commonjs是module.exports，exports导出，require导入；ES6则是export导出，import导入。
• commonjs是运行时加载模块，ES6是在静态编译期间就确定模块的依赖。
• ES6在编译期间会将所有import提升到顶部，commonjs不会提升require。
• commonjs导出的是一个值拷贝，会对加载结果进行缓存，一旦内部再修改这个值，则不会同步到外部。ES6是导出的一个引用，内部修改可以同步到外部。
• 两者的循环导入的实现原理不同，commonjs是当模块遇到循环加载时，返回的是当前已经执行的部分的值，而不是代码全部执行后的值，两者可能会有差异。所以，输入变量的时候，必须非常小心。ES6 模块是动态引用，如果使用import从一个模块加载变量（即import foo from ‘foo’），那些变量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。
• commonjs中顶层的this指向这个模块本身，而ES6中顶层this指向undefined。
• 然后就是commonjs中的一些顶层变量在ES6中不再存在：
  arguments
  require
  module
  exports
  __filename
  __dirname
  这两种都是解决上面问题，那么都是解决什么问题呢。
• 解决变量污染问题，每个文件都是独立的作用域，所以不存在变量污染
• 解决代码维护问题，一个文件里代码非常清晰
• 解决文件依赖问题，一个文件里可以清楚的看到依赖了那些其它文件

6-2. 打包过程

webpack：
分析各个模块之间的依赖=>然后进行编译打=>打包后的代码在本地服务器渲染。首先分析各个模块之间的依赖，然后进行打包，在启动webpack-dev-server，请求服务器时，直接显示打包结果。webpack打包之后存在的问题：随着模块的增多，会造成打出的 bundle 体积过大，造成热更新速度变慢。
vite：
启动服务器=>请求模块时按需动态编译显示。（vite遵循的是ES Modlues模块规范来执行代码，不需要打包编译成es5模块即可在浏览器运行。）

首先启动开发服务器，请求某个模块时再对该模块进行实时编译，因为现代浏览器本身支持ES-Module，所以会自动向依赖的Module发出请求。所以vite就将开发环境下的模块文件作为浏览器的执行文件，而不是像webpack进行打包后交给本地服务器。

总结：vite启动的时候不需要分析各个模块之间的依赖关系、不需要打包编译。vite可按需动态编译缩减时间。当项目越复杂、模块越多的情况下，vite明显优于webpack
##6- 3. 热更新
webpack：模块以及模块依赖的模块需重新编译
vite：浏览器重新请求该模块即可

6-4.使用方面

vite开箱即用，更加简单，基于浏览器ESM，使得HMR更加优秀，达到极速的效果；webpack更加灵活，api以及插件生态更加丰富。

6-5.原理不同

webpack是bundle，自己实现了一套模块导入导出机制。
vite是利用浏览器的esm能力，是bundless。