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插件，每次前端项目打包自动生成版本压缩包，为项目打包增添版本管理能力，降低了日常工作中的调试难度，进一步提升工作效率。