"```markdown
Vite 常见的 Hook
Vite 是一个现代前端构建工具，提供了多种生命周期 Hook 来帮助开发者在不同的阶段执行自定义逻辑。以下是一些常见的 Hook。
1. configureServer
当 Vite 启动开发服务器时，configureServer Hook 会被调用。这个 Hook 可以用来修改 Vite 的开发服务器配置，例如添加中间件。
// vite.config.js
export default {
configureServer(server) {
server.middlewares.use((req, res, next) => {
console.log('请求: ', req.url);
next();
});
}
};
2. buildStart
在构建开始时，buildStart Hook 会被调用。这个 Hook 可以用于在构建之前执行一些初始化操作。
// vite.config.js
export default {
buildStart() {
console.log('构建开始');
}
};
3. resolveId
resolveId Hook 在 Vite 尝试解析模块 ID 时被调用。可以用来自定义模块的解析逻辑。
// vite.config.js
export default {
resolveId(source) {
if (source === 'my-module') {
return 'path/to/my-module.js';
}
}
};
4. load
load Hook 用于加载模块的内容。可以在此 Hook 中修改模块的内容或添加额外的处理。
// vite.config.js
export default {
load(id) {
if (id.endsWith('.my')) {
return 'export default \"Hello from .my file!\"';
}
}
};
5. transform
transform Hook 在模块内容转换时被调用。可以用来在 Vite 转换代码之前或之后插入自定义逻辑。
// vite.config.js
export default {
transform(code, id) {
if (id.endsWith('.js')) {
return {
code: code.replace(/console.log/g, 'console.warn'),
map: null
};
}
}
};
6. generateBundle
在生成最终的输出包时，generateBundle Hook 会被调用。可以在这里进行最终的打包处理。
// vite.config.js
export default {
generateBundle(options, bundle) {
console.log('生成包:', bundle);
}
};
7. writeBundle
在写入包到文件系统后，writeBundle Hook 被调用。可以在这里执行一些清理工作或后处理。
// vite.config.js
export default {
writeBundle(options, bundle) {
console.log('包已写入:', options);
}
};
8. closeBundle
closeBundle Hook 在所有的输出都写入后被调用。可以用于执行清理或通知操作。
// vite.config.js
export default {
closeBundle() {
console.log('构建完成');
}
};
9. handleHotUpdate
在模块热更新时，handleHotUpdate Hook 会被调用。可以用来处理热更新逻辑。
// vite.config.js
export default {
handleHotUpdate({ file, server }) {
console.log(`热更新: ${file}`);
}
};
10. transformIndexHtml
此 Hook 允许在生成 HTML 文件之前修改其内容。可以用于插入自定义的 <script> 或 <link> 标签。
// vite.config.js
export default {
transformIndexHtml(html) {
return html.replace(
'<title>Vite App</title>',
'<title>Custom Vite App</title>'
);
}
};
