Webpack和Vite介绍 Webpack，前端打包工具，使用NodeJS编写，JS应用程序的静态模块打包器，以一个或多个JS文件为入口，递归检查每个JS模块的依赖，从而构建出一个依赖关系图，然后依据该关系图，将整个应用程序打包成一个或多个bundle。 Vite，前端打包工具，VUE的作者尤雨溪在开发vue3.0时开发的一个基于原生 ES-Module的前端构建工具。 Webpack和Vite原理 Webpack：分析依赖 => 编译打包 => 交给本地服务器进行渲染； Vite: 启动服务器=> 请求模块时按需动态编译显示； Webpack和Vite优缺点 1、Vite快速的冷启动，不需要等待打包；即时的热模块更新；真正的按需编译，不用等待整个项目编译完成。 2、Vite相关生态没有Webpack完善（当前），Vite可以作为开发的辅助。 Webpack和Vite构建项目及基本配置 构建项目（Webpack） 全局安装Webpack命令：npm install -g webpack webpack-cli 全局安装vue-cli命令：npm install -g @vue/cli 创建项目命令：vue create demo01 选择：vue3==>cd demo01==>npm install==>npm run serve vue.config.js内容： const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true }) 构建项目（Vite） 创建项目命令：npm create vite@latest demo02 选择：vue==>JavaScript==>cd demo02==>npm install==>npm run dev vue.config.js内容： import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], })