Vite笔记之19-vite常用插件 vite-plugin-html插件

1.vite常用插件之vite-plugin-html

在webpack中如果需要动态在html添加文本，需要依赖webpack-html-plugin,如果重新打包需要清除，需要依赖 clean-webpack-plugin (clean: true)。

而在vite中，这些都已经默认内置，是因为vite他内置了非常多的插件, 我们作为普通的开发者不需要承担这么高的心智负担。

例如，Vue和React开发者在使用Vite时，可以直接享受到对各自框架的内置支持，无需手动配置loader等繁琐步骤。此外，Vite还集成了Vue团队一贯的“减少心智负担”的作风，将css-loader、less-loader、ts-loader等常用loader的功能内置化，让开发者可以更加专注于业务逻辑的开发。

github.com/vitejs/vite…

2.vite-plugin-html：动态控制HTML内容

虽然Vite已经内置了许多强大的功能，但有时候我们仍然需要对HTML文件进行更加细致的控制。这时，vite-plugin-html插件就派上了用场。该插件允许我们在Vite构建过程中动态地修改HTML文件的内容，比如注入公共的CSS、JS文件，或者根据环境变量修改HTML中的某些元素。

3. 手写CreateHtmlPlugin插件

为了更深入地理解vite-plugin-html的工作原理，我们可以尝试手写一个简单的CreateHtmlPlugin插件。这个插件将允许我们在Vite构建过程中替换HTML文件中的特定占位符，比如<%= title %>。ejs在服务端会用的比较频繁，使用模版引擎，<%= title %> 替换 因为服务端可能经常会动态的去修改index.html的内容

module.exports = (options) => {
  return {
    // 转换html的 
    // 将我们插件的一个执行时机提前 
    transformIndexHtml: {
      enforce: "pre", 
      transform: (html, ctx) => {
        // ctx 表示当前整个请求的一个执行期上下文: api /index.html  /user/userlist json  get post headers
        console.log("html", html);
  
        return html.replace(/<%= title %>/g, options.inject.data.title);
      }
    }
    }

// transformIndexHtml: (html, ctx) => {
// 	// 这种写法也可以
// 	return html.replace(/<%= title %>/g, options.inject.data.title)
// }

}

使用 vite.config.js

CreateHtmlPlugin({
        inject: {
                data: {
                        title: '哈哈'
                }
        }
}),

index.html

<title><%= title %></title>

总结

通过手写CreateHtmlPlugin插件，我们不仅深入理解了vite-plugin-html的工作原理，还体验到了Vite插件系统的灵活性和强大功能。