vite.config.js

image.png

css配置

css模块化配置

  1. export default defineConfig({
  2.   plugins: [vue()],
  3.   css:{
  4.     modules:{//对css模块化的默认行为的覆盖，配置之后会交由postcss处理
  5.       localsConvention:"camelCaseOnly",//修改生成的配置对象的key值 展示形式 eg:驼峰命名
  6.       scopeBehaviour:'local',//配置当前的模块化行为是模块化还是全局，有hash就是开启模块化的标志。
  7.       generateScopedName:"[name]_[local]_[hash:5]",
  8.       hashPrefix:'hellow',//用户来配置独特的hash
  9.       globalModulePaths:[path.resolve('/dawdsa')],//代表不想参与到css模块化的路径
  10.     }
  11.   }
  12. })

css预处理器配置

  1. preprocessorOptions:{//key+config形式
  2.   less:{
  3.     math:"always",//识别计算表达式
  4.       globalVars:{
  5.       themeColor:'red'
  6.     }, //定义全局变量
  7.   },
  8.   sass:{
  9.   }
  10. },
  11. devSourcemap:true,//开启sourcemap
  12.   }

postcss配置

  1. export default defineConfig({
  2.   plugins: [vue()],
  3.   css:{
  4.     modules:{//对css模块化的默认行为的覆盖，配置之后会交由postcss处理
  5.       localsConvention:"camelCaseOnly",//修改生成的配置对象的key值 展示形式 eg:驼峰命名
  6.       scopeBehaviour:'local',//配置当前的模块化行为是模块化还是全局，有hash就是开启模块化的标志。
  7.       generateScopedName:"[name]_[local]_[hash:5]",
  8.       hashPrefix:'hellow',//用户来配置独特的hash
  9.       globalModulePaths:[path.resolve('/dawdsa')],//代表不想参与到css模块化的路径
  10.     },
  11.     preprocessorOptions:{//key+config形式
  12.       less:{
  13.         math:"always",//识别计算表达式
  14.         globalVars:{
  15.           themeColor:'red'
  16.         }, //定义全局变量
  17.       },
  18.       sass:{
  21.       }
  22.     },
  23.     devSourcemap:true,//开启sourcemap
  24.     postcss:{
  25.       plugins:[postCssPreset(
  26.         //导入变量，到处变量， autofix,...
  27.       )] //预设options=> https://github.com/csstools/postcss-preset-env 
  28.     }
  29.   }
  30. })

vite对静态资源的处理

对大多数静态资源都是开箱即用。
resolve配置项==》和webpack用法一样
生产构建静态资源

  1. build:{
  2.   rollupOptions:{
  3.     output:{
  4.       assetFileNames:'[hash].[name].[ext]'
  5.     },
  6.   },
  7.   assetsInlineLimit:4096000,
  8.     outDir:'TestDir',
  9.     assetsDir:'static'
  10. }

vite部分插件的源码阅读

vite-aliases:通过读取更目录下src的所有文件，将其分为文件夹和文件，定义resolve配置对象，将键定义为所需要的别名，而值设置为文件夹的路径地址。最后返回该配置对象，vite会自动将其与vite.config.js中的配置对象进行合并（在插件的config钩子中）。

vite-plugin-html:将html中的字符串变量进行替换（在transformIndexHtml钩子中完成）

手写vite-plugin-mock:（在configureServer钩子中完成）

  1. const fs = require('fs')
  2. const path = require('path')
  3. module.exports = (options)=>{
  4.   // 主要就是拦截http去请求
  5.   // 当我们通过fetch和axios去发送请求时
  6.   // 当打给vite本地服务器的时候，vitesever接管
  7.   return {
  8.     configureServer(server){
  9.       const mockStat = fs.statSync('mock');
  10.       const isDirectory = mockStat.isDirectory();
  11.       let mockResult = [];
  12.       if(isDirectory){
  13.         mockResult = require(path.resolve(process.cwd(),'./mock/index'))
  14.       }
  15.       server.middlewares.use((req,res,next)=>{
  16.             let matchIndex =  mockResult.findIndex(mockDescription=>mockDescription.url==req.url)
  17.         if(matchIndex!=-1){
  18.           res.setHeader('Content-type','application/json')
  19.           res.end(JSON.stringify(mockResult[matchIndex]))
  20.         }else 
  21.           next()
  22.       })
  25.     }
  26.   }
  27. }

vite作为开箱即用的工具内置了那些功能插件

源码地址 https://github.com/vitejs/vite/blob/e223f84af877d354e197ca0ce9103777ed247718/packages/vite/src/node/plugins/index.ts
在vite的源码中我们可以看到内置的一些功能

  1. import aliasPlugin from '@rollup/plugin-alias'
  2. import type { PluginHookUtils, ResolvedConfig } from '../config'
  3. import { isDepsOptimizerEnabled } from '../config'
  4. import type { HookHandler, Plugin } from '../plugin'
  5. import { getDepsOptimizer } from '../optimizer'
  6. import { shouldExternalizeForSSR } from '../ssr/ssrExternal'
  7. import { jsonPlugin } from './json'
  8. import { resolvePlugin } from './resolve'
  9. import { optimizedDepsBuildPlugin, optimizedDepsPlugin } from './optimizedDeps'
  10. import { esbuildPlugin } from './esbuild'
  11. import { importAnalysisPlugin } from './importAnalysis'
  12. import { cssPlugin, cssPostPlugin } from './css'
  13. import { assetPlugin } from './asset'
  14. import { clientInjectionsPlugin } from './clientInjections'
  15. import { buildHtmlPlugin, htmlInlineProxyPlugin } from './html'
  16. import { wasmFallbackPlugin, wasmHelperPlugin } from './wasm'
  17. import { modulePreloadPolyfillPlugin } from './modulePreloadPolyfill'
  18. import { webWorkerPlugin } from './worker'
  19. import { preAliasPlugin } from './preAlias'
  20. import { definePlugin } from './define'
  21. import { ssrRequireHookPlugin } from './ssrRequireHook'
  22. import { workerImportMetaUrlPlugin } from './workerImportMetaUrl'
  23. import { assetImportMetaUrlPlugin } from './assetImportMetaUrl'
  24. import { ensureWatchPlugin } from './ensureWatch'
  25. import { metadataPlugin } from './metadata'
  26. import { dynamicImportVarsPlugin } from './dynamicImportVars'
  27. import { importGlobPlugin } from './importMetaGlob'

vite对ts的支持