土豆Coder
土豆Coder

Vite 基本配置及原理

Vite 基本配置及原理

  • 介绍
  • vite.config.js
    • optimizeDeps.exclude
    • 不同环境的 vite 配置
    • css配置
      • Vite 对 css 的处理
      • Vite 对 cssmodule 的处理和配置
      • Vite 对预处理器的配置
      • devSourcemap
      • Vite 对 postcss 的支持
    • Vite 静态资源别名设置
    • Vite 生产环境配置

介绍

如果你还不知道 Vite，或者不知道为什么有了 Webpack 还要出现 Vite，可以先移步看 从零入门 Vite 与 Webpack 对比 。

vite.config.js

前文说过，Vite 使用 Koa 或者 express 这种后端服务框架搭建了一个开发服务器，当我们执行 npm run dev 命令去启动这个开发服务器时，会提示我们访问 http://127.0.0.1:5173/ 这个服务地址打开项目，这就是我们的本地开发服务器。

在服务器启动后 node 会去读取项目配置文件 vite.config.js，通过配置的内容来启动我们的服务器，比如配置中有很多的插件 plugins，服务器启动过程中，在不同的插件的不同生命周期会执行插件不同的配置内容，这些配置会直接返回并影响这个本地服务器最终给出的结果，也就是呈现在浏览器的内容。

先从零开始一个 Vite 构建实例：


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vitetitle>
head>
<body>
  <script src="./main.js" type="module">script>
body>
html>

// main.js
import _ from 'lodash-es'
console.log('lodash', _)

// package.json
"scripts": {
  "dev": "vite",
  "build": "vite build"
}

npm init -y
npm i lodash-es

scripts 是 npm 提供的脚本命令功能，也可以使用工程内部执行指令 npx，即： npm run dev 或 npx vite 都可以

执行 npm run dev 命令启动项目后，Vite 会自动解析根目录下名为 vite.config.js 文件：

// vite.config.js
export default {
	// 配置内容
	...
}

思考：vite.config.js 是 node 来执行的，那为什么它 可以书写成 ESModule 的形式？
因为：Vite 服务器启动后会读取 vite.config.js 文件，根据配置的内容是启动和配置服务器，这时候 node 会率先去解析文件语法，如果发现是 ESModule 规范会直接将其替换成 CommonJS 规范。

optimizeDeps.exclude

在预构建中强制排除的依赖项，在依赖预构建时，Vite 将有许多内部模块的 ESModule 依赖关系转换为单个模块：

// vite.config.js
export default {
  optimizeDeps: {
    exclude: ['lodash-es'] // 不依赖预构建的包
  }
}

或者

// vite.config.js
// 编辑器会根据 defineConfig 给出配置的 key 提示
import { defineConfig } from 'vite'
export default defineConfig({
  optimizeDeps: {
    exclude: ['lodash-es'] // 不依赖预构建的包
  }
})

是否依赖预构建打包结果如下：

  • 依赖预构建（默认）：
    在这里插入图片描述

  • 不依赖预构建：
    在这里插入图片描述

不同环境的 vite 配置

// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig(({command}) => {
  if(command === 'build') {
    return {
		// 生产环境配置
	}
  } else {
    return {
		// 开发环境配置
	}
  }
})

其中 command 有两个值，根据命令行执行的命令会赋予它不同的值，当 npm run dev 时候，command 值为 serve 表示开发环境，当 npm run build 时，command 值为 build 表示生产环境，Vite 会根据执行命令的不同通过 command 值的判断来选择不同的构建配置，形成打包成果物。

为了更好地扩展性写配置，进行一下变体：

// vite.config.js
import { defineConfig } from 'vite'
import viteBaseConfig from './vite.base.config' // 通用基础配置内容
import viteDevConfig from './vite.dev.config' // 开发环境配置内容
import viteProdConfig from './vite.prod.config' // 生产环境配置内容

const envResolver = {
  'build': () => {
    console.log('生产环境')
    return {...viteBaseConfig, ...viteProdConfig}
  },
  'serve': () => {
    console.log('开发环境')
    return {...viteBaseConfig, ...viteDevConfig}
  }
}

export default defineConfig(({command}) => {
  // command: build(生产环境), serve(开发环境)
  return envResolver[command]()
})

css配置

Vite 对 css 的处理

如果你用过 Webpack 应该知道，Webpack 默认是不处理 .css 文件的，如果需要处理样式文件需要使用插件配置，其配置原理和具体内容可以参考 webpack入门到实战（上） 。但是，Vite 天生就支持对 .css 文件的直接处理，不需要进行额外的配置，还是上面的例子，这里我们加入引入 CSS 文件的内容：


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vitetitle>
head>
<body>
  <div class="app">Vite Demodiv>
  <script src="./main.js" type="module">script>
body>
html>

// main.js
import './index.css'

/* index.css */
.app{
  background-color: purple;
  color: green;
}

看下页面元素内容：

Vite 基本配置及原理_第1张图片
在这里插入图片描述

发现网络请求中的 index.css 文件内容发生了变化，并且样式内容被插入到了 index.html 的 head 中，Vite 处理 .css 的过程如下：

  1. 读取到 main.js 中导入了 index.css
  2. 使用 fs 模块读取 index.css 文件内容
  3. 创建