Hi！这里是JustHappy，回忆一下哈，我们最开始学习前端的时候是干了啥？我想大多数朋友是在VScode上安装了几个插件，像Live Server、ESlint之类的，所以想必大家对插件并不陌生，所以我们前端生涯中都会遇到什么样的插件呢？如何借助插件实现编程飞升呢？我们来整理整理，构建构建切图仔的插件思想吧！
各大插件系统生态
嘿嘿，为了留住各位看官，咱先不聊枯燥的概念，咱先来看看有几个插件系统值得我们聊的
Chrome浏览器插件系统（也叫扩展程序）
Chrome 插件（也称为扩展）是一个用于增强浏览器功能的小型程序，通常通过在浏览器中安装来扩展其功能。这些插件是由 HTML、JavaScript 和 CSS 等前端技术编写的，所以上手起来并不难，就很像在开发一个小型的页面，具体可以直接查看chrome有关插件开发的文档
扩展程序 / 使用入门 | Get started | Chrome for Developers
插件推荐：
- Wappalyzer: 免费帮你分析网页的技术栈
- 沉浸式翻译：看英文开发文档必备
VScode插件系统（或者说扩展系统）
可以说VS Code强大的插件生态成就了咱这“宇宙第一编辑器“，VS Code 插件使用 Node.js 和 TypeScript（或 JavaScript）开发，支持通过 API 扩展编辑器的功能。以下是官方的扩展API文档
插件推荐
- i18n-ally：提升处理国际化时候的开发体验
- TODO Tree： 代码TODO注释、FIXME注释，帮助快速定位代码
Webpack插件系统
Webpack作为目前最主流的前端打包工具，也是插件生态最全面的打包构建工具。虽然说其性能不及Vite或者Rspack，但是凭借其在工具链生态的先发优势，我想很长一段时间内不可能被取缔，而Webpack相关的插件主要有以下两类吧
-
官方插件
Webpack 官方提供了一些常用的插件，帮助开发者进行一些常见的构建操作。它们是 Webpack 官方团队为了解决一些常见问题而开发的插件。
-
第三方插件
除了官方插件，社区也开发了大量的第三方插件，涵盖了 Webpack 构建过程中各种不同的需求。第三方插件通常是为了解决一些特定问题，或者提供某些高级功能。
注意：在Webpack中Loader和Plugin是两个不同的概念，但是在软件工程的角度来看，这两个本质上都是插件
什么是插件？什么是插件系统？
在 软件工程 中，插件（Plugin）是一种可插拔的软件组件，它能够扩展、增强或改变某个应用程序的功能。合理的运用插件，相信你会在开发过程中收获游戏“开挂”一般的体验🔫
如何“开挂”？插件系统？到底有啥的
插件系统一般由两个部分组成：核心系统，插件模块
Webpack 插件系统 🆚 Vite 插件系统
从插件使用的角度思考打包工具的选择
截止本文撰写，Vite已经发布4年有余，可以说Webpack能做的Vite也都可以做，但是有些许区别的需要我们注意的
这是Vite的插件文档
核心架构不同
Vite 插件系统主要是围绕 Rollup 插件体系进行设计的，并且 Vite 使用的是基于原生 ES 模块（ESM）的开发模式。在 Webpack 的插件系统中，既有 CommonJS 模块格式的插件，也有 ES6 (ESM) 模块格式的插件，但大体上，Webpack 的插件生态系统中以 CommonJS 模块格式为主。
Webpack 本身最初是基于 CommonJS 规范设计的，所以早期的插件大多采用 CommonJS 模块格式。很多 Webpack 插件仍然是采用 CommonJS 形式，尤其是在 Webpack 4 和更早版本中。
基本代码实现
以下是最基本的 Vite 插件 和 Webpack 插件 写法示例：
1. Vite 插件的基本写法
Vite 插件是通过返回一个包含钩子函数的对象来实现的。最常见的钩子是 transform 和 configureServer，它们可以处理文件转换和开发服务器的配置。
基本插件结构：
// vite-plugin-example.js
export default function vitePluginExample() {
return {
name: 'vite-plugin-example', // 插件的名称
transform(src, id) {
// 这里可以对源码进行处理
if (id.endsWith('.txt')) {
return {
code:
export default ${JSON.stringify(src)}, // 转换文件内容
map: null, // source map（如果需要）
};
}
}
};
}
在 Vite 配置中使用插件：
// vite.config.js
import { defineConfig } from 'vite';
import vitePluginExample from './vite-plugin-example';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vitePluginExample()]
});
2. Webpack 插件的基本写法
Webpack 插件是通过 class 和 apply 方法来实现的。插件的核心是 apply 方法，它会被 Webpack 在构建时自动调用。
基本插件结构：
// webpack-plugin-example.js
class WebpackPluginExample {
constructor(options) {
// 插件的构造函数可以接受配置参数
this.options = options || {};
}
apply(compiler) {
// 这是插件的核心方法，它接受 Webpack 编译器对象
compiler.hooks.emit.tapAsync('WebpackPluginExample', (compilation, callback) => {
console.log('Webpack 插件运行中...');
// 可以对编译的资源进行处理
callback(); // 调用回调来告诉 Webpack 插件已经完成工作
});
}
}
module.exports = WebpackPluginExample;
在 Webpack 配置中使用插件：
// webpack.config.js
const WebpackPluginExample = require('./webpack-plugin-example');
module.exports = {
// Webpack 配置
plugins: [
new WebpackPluginExample({ /* 插件配置选项 */ })
]
};
所以我们需要思考什么？如何选择？
无论是Webpack还是Vite，更或者说是Rspack这些打包构建工具，其本质上都是工具，在选择工具的时候我们往往都是从以下三个方面考虑的
- 兼容性
- 团队开发的过程生态（历史原因）
- 工具本身的特性
参考文章：
