plugin作为webpack的中流砥柱，一直是大厂面试官热衷于拿来考察面试者的一个问题，5.x版本很多语法发生了改变，本文从0到1带你掌握一个webpack5.x版本的plugin开发该有的姿势

大家好，我是易师傅，在现如今 vite 工具快开始盛行之下，我们是不是可以去做一件有意义的事呢，比如写一个 vite 插件，你觉得怎么样？

哈喽，很高兴你能点开这篇博客，本博客是针对 Vite 的体验系列文章之实战篇，认真看完后相信你也能如法炮制写一个属于自己的 vite 插件。

运行成功，f12控制台css代码展示正常。

通过解析Vue组件中类名自动生成原子CSS,实现快速样式开发。支持颜色、间距等多种原子类名声明,涵盖日常需求。使用简单的类名书写样式,插件自动输出CSS文件。如果想提高CSS开发效率,可以试试这个插件

Plugin 如果说你没有对前端模块化有过了解，不了解 Webpack 的 plugin，可以阅读这个章节了解 Plugin 的前世今生~ 在上一代打包工具 browserify

自 13.2.0 版本开始，Node.js 在保留了 CommonJS（CJS）语法的前提下，新增了对 ES Modules（ESM）语法的支持。但 CJS 和 ESM 将长期处于共存……

Vite 的诞生并不是一帆风顺的，它与其他构建工具，如 esbuild 和 Rollup，有着复杂而微妙的关系。

作者：鲲尘前言snowpack / vite 等基于 ESM 的构建工具出现，让项目的工程构建不再需要构建一个完整的 bundle。很多人都觉得我们不再需要打包工具的时代即将到来。借助浏览器 ESM