打包工具学习

跨域产生 浏览器同源策略，协议 域名 端口，会先发一个options请求 浏览器请求 ——-》 自己的服务器 ——〉 请求目标服务器。 ——》 返回到浏览器 vite的开发服务器

性能优化说的什么 开发时构建速度优化，yarn dev webpack工夫很重，cache-loader （两次构建代码没有变化，直接使用缓存，不调用loader）多线程构建 vite 按需加载 页面

1.默认支持 vite 天生支持ts，ts怎么配置，怎么约束别人。 怎么去ts错误直接在控制台显示，vite-plugin-checker,运行或者打包必须检查，必须通过才能打包。 vite-env.

vite常用钩子 生产包，可以使用npx vite preivew进行启动 universal hooks rollup和vite都会调用 配置文件： vite-plugin-fenderation

1. vite常用插件之vite-plugin-mock mock数据: 模拟数据 前后端一般是并行开发 用户列表 ( 接口文档 ) mock数据 去做你前端的工作 简单方式: 直接去写死一两个数据

1.vite常用插件之vite-plugin-html webpack --> webpack-html-plugin / clean-webpack-plugin (clean: true) 其实就

1. vite-aliases的使用 vite-aliases可以帮助我们自动生成别名: 检测你当前目录下包括src在内的所有文件夹, 并帮助我们去生成别名 2.手写vite-aliases 原理 V

1. 插件是什么 生命周期: 其实就和我们人一样, vite从开始执行到执行结束, 那么着整个过程就是vite的生命周期 webpack: 输出html文件的一个插件 htmlWebpackplugi

1. 启动服务器运行打包文件 使用yarn build 在dist下启动live-server ，这是相对于整个文件作为根目录，不是以dist作为根目录 。 2. vite在生产环境对静态资源的处理

1. vite中处理svg资源 vite对svg依旧是开箱即用的 svg: scalable vector graphics 可伸缩矢量图形 (新的图片格式) 传统图片格式: jpg, jpeg...

1. 目录结构 main.js vite.config.js aliasResolve.js index.js

除了api动态请求的数据，html和assets如图片都是静态资源。vite默认将静态资源放在assets下。 imageLoader.js main.js vite.base.config.js 路

1. 服务器读取文件 如果写的是相对路径 那么他会尝试去拼接成绝对路径，使用process.cwd()来进行对应的拼接 使用require进行读取时，会转换成立即执行函数，验证是打印arguments

1. postcss在vite.config.js中使用 直接在css.postcss中进行配置, 该属性直接配置的就是postcss的配置。如果有定义postcss.config.js优先级低于vi

1. preprocessorOptions配置作用 主要用来配置css预处理器的一些全局参数,更多的参数参考 less官网 如果没有使用构建工具，又使用less假设没有使用构建工具, 我们又想去编译

1. vite处理css的配置 vite.config.js 中我们通过css属性去控制整个vite对于css的处理行为,vite中的css modules会最终给postcss进行处理 localC

1. vite对css处理的过程 创建目录 index.css main.js vite自带对css文件的直接处理，处理方式和App.vue相同，都是当作js处理 vite 读取main.js中引用到

1. 什么是开发服务器 开发服务器是自动进行编译，启动一个服务端口提供良好的开发环境。 问题：为什么vite开发服务器会请求App.vue,这是什么原因？ 浏览器只识别html,js,css。设置co

1. 创建文件目录 vite.config.js 2. 什么是环境变量 环境变量：根据当前代码环境产生值的变化的变量叫环境变量 代码环境： 开发环境 测试环境 预发布环境 灰度环境 生产环境 举例：百

vite配置文件语法提示及环境区分 1.vite配置文件语法提示 webstorm 有自动提示 vscode特殊处理 第一种：引用defineConfig函数 第二种：使用注解 说明:正常函数有无返回