webpack 是什么?引用webpack官网 的原话:
本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),
然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。
图中,webpack 将左侧繁杂的不同类型文件的模板依赖关系,包括 .js、.hbs、.cjs、.sass、.jpg、.png 等类型文件,打包成了 .js、.css、.jpg、.png 4种类型的静态资源。这就是 webpack 的作用,负责将项目中依赖的各个模块,打包成一个或多个文件。
1.webpack和vite区别:
Webpack基于commonjs,先打包合并然后请求服务器,更改一个模块,其他有依赖关系的模块都会重新打包;
Vite基于es6module,自动向依赖的module发请求,服务端按需编译返回,改动一个模块仅仅会重新请求该模块;
2.为什么选vite作为构建工具?
3.脚手架用于初始化,构建工具用于编译阶段
脚手架:初始化;
有人帮你把这个开发过程中要用到的工具、环境都配置好了,你就可以方便地直接开始做开发,专注你的业务,而不用再花时间去配置这个开发环境,这个开发环境就是脚手架。
vue-cli/@vue-cli create-vue(vue3专用)vite
构建工具:编译阶段
vite webpack
打包工具:
vite webpack rollup