真实案例 | 如何用iFlyCode开发Webpack插件？
01
案例背景
在项目中，我们经常需要存档前端每次打包的版本，方便线上快速切换不同版本使用。经过思考，我们可以在打包时，将本次打包结果另存为zip压缩包，方便后续使用。于是我准备开发一个Webpack插件实现此功能，借助iFlyCode智能编程助手，2分钟就能完成！
02
开发过程
整理好功能需求描述，发送给iFlyCode：
iFlyCode生成第一个版本的代码：
// my-webpack-backup-plugin.js
const fs = require('fs');
const path = require('path');
class WebpackBackupPlugin {
constructor(options = {}) {
this.backupDir = options.backupDir || path.join(__dirname, 'backup');
}
apply(compiler) {
compiler.hooks.done.tap('WebpackBackupPlugin', (stats) => {
// 确保备份目录存在
if (!fs.existsSync(this.backupDir)) {
fs.mkdirSync(this.backupDir, { recursive: true });
}
// 获取当前打包输出的路径
const outputPath = compiler.options.output.path;
// 生成备份文件名，例如：backup-YYYYMMDDHHmmss.zip
const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
const backupFileName = `backup-${timestamp}.zip`;
const backupFilePath = path.join(this.backupDir, backupFileName);
// 使用系统命令进行压缩（需要安装zip工具）
const zipCommand = `zip -r ${backupFilePath} ${outputPath}`;
try {
require('child_process').execSync(zipCommand);
console.log(`Backup created at ${backupFilePath}`);
} catch (error) {
console.error('Failed to create backup:', error);
}
});
}
}
module.exports = WebpackBackupPlugin;
iFlyCode会告诉我如何使用此插件：
上面注意事项中，iFlyCode已经提示我需要安装zip工具，由于我是windows操作系统，我准备先不安装，直接将生成的插件放到项目里测试，这时候会报错（提示我zip工具不可用）：
我将问题告诉iFlyCode，并让它给我解决方案:
iFlyCode提供一种解决方案，并重新生成了插件代码：
// my-webpack-backup-plugin.js
const fs = require('fs');
const path = require('path');
const archiver = require('archiver');
class WebpackBackupPlugin {
constructor(options = {}) {
this.backupDir = options.backupDir || path.join(__dirname, 'backup');
}
apply(compiler) {
compiler.hooks.done.tap('WebpackBackupPlugin', (stats) => {
// 确保备份目录存在
if (!fs.existsSync(this.backupDir)) {
fs.mkdirSync(this.backupDir, { recursive: true });
}
// 获取当前打包输出的路径
const outputPath = compiler.options.output.path;
// 生成备份文件名，例如：backup-YYYYMMDDHHmmss.zip
const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
const backupFileName = `backup-${timestamp}.zip`;
const backupFilePath = path.join(this.backupDir, backupFileName);
// 使用archiver进行压缩
const output = fs.createWriteStream(backupFilePath);
const archive = archiver('zip', {
zlib: { level: 9 }, // 设置压缩级别
});
archive.pipe(output);
archive.directory(outputPath, false); // 将输出目录添加到压缩包中
archive.finalize();
archive.on('end', () => {
console.log(`Backup created at ${backupFilePath}`);
});
archive.on('error', (err) => {
console.error('Failed to create backup:', err);
});
});
}
}
module.exports = WebpackBackupPlugin;
再次将插件放入项目中，并进行测试：
每次打包后，都会将本地打包的内容进行压缩存档：
03
总结
整体来看，iFlyCode帮我完成了Webpack插件，每次前端项目打包自动生成版本压缩包，为项目打包增添版本管理能力，降低了日常工作中的调试难度，进一步提升工作效率。