• Vite

和 webpack 启动流程比较

Vite启动流程	Webpack启动流程
1. 启动服务器	1. 扫描所有模块
2. 按需编译首个页面	2. 打包成bundle
3. 其他模块等请求时再处理	3. 启动服务器

Vite 采用了即时编译的方式，在开发模式下通过浏览器原生支持的 ES Module 特性进行加载，不需要打包。

环境变量与模式

import.meta.env 是 Vite（ESM）在构建期注入的前端环境变量，代码中访问：

console.log(import.meta.env.MODE)

只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。

.env.[mode] 文件：

VITE_API_URL=https://api.example.com

scripts 命令可以通过传递 --mode 选项选择不同的模式，代码中获取：

import.meta.env.VITE_API_URL

配置全局使用 less 变量

vite 和 webpack 不同，不需要 less-loader，只需要安装 less 模块

vite.config.js:

export default defineConfig(({ mode }) => ({
    ...
    css: {
      preprocessorOptions: {
        less: {
         math: 'always', // 括号内使用数学计算
         additionalData: `@import "@/assets/css/public.less";`
        }
      },
      ...
    }
}))

加载图片

// import.meta.url 提供当前模块的基准 URL
new URL(`./assets/${name}.png`, import.meta.url).href

// 静态导入
import staticImage from '@/assets/static.png'

热更新

Vite 内置了基于浏览器原生模块热更新的开发服务器，无需额外配置即可实现快速的热更新。