Write Vite plugins using resolveId, load, transformIndexHtml, rollupOptions, and the apply property for build-only plugins
0 / 5 completed
1 / 5
What is the purpose of resolveId in a Vite plugin?
resolveId hook: receives the import string and importer path. Return a string to override the resolved path, or return an object with id and external: true to mark it as external. Commonly used to create virtual modules — e.g. resolve 'virtual:my-plugin' to a sentinel string that the load hook then handles.
2 / 5
What does the load hook do in a Vite plugin?
load hook: receives the resolved module ID. If it returns a string or { code, map }, Vite uses that as the module source rather than reading from disk. Paired with resolveId, this enables fully virtual modules — e.g. a plugin that exposes build-time constants as an importable module.
3 / 5
How does transformIndexHtml differ from other Vite plugin hooks?
transformIndexHtml: runs during both dev and build. A plugin can return a transformed HTML string or an array of { tag, attrs, children, injectTo } descriptor objects. Injection targets include 'head', 'head-prepend', 'body', and 'body-prepend'. Useful for injecting analytics snippets, CSP nonces, or polyfills.
4 / 5
What does rollupOptions inside Vite's defineConfig allow you to configure?
rollupOptions: Vite uses Rollup under the hood for production builds. build.rollupOptions exposes the full Rollup API: input, output.manualChunks, external, plugins, etc. For example, manualChunks: { vendor: ['react', 'react-dom'] } splits React into a separate cacheable chunk.
5 / 5
What is the correct way to make a Vite plugin apply only during build (not dev)?
Plugin apply property: A Vite plugin object can include apply: 'build' or apply: 'serve' to restrict when it runs. Alternatively, apply can be a function: apply(config, { command }) { return command === 'build' } for more nuanced conditions such as checking environment variables.