【webpack 入门指南】利用这个webpack插件压缩打包项目资源，部署更轻松

打造压缩构建资源为 zip 包的 webpack 插件，深入理解 webpack 原理，开启 webpack 开发工程师之路。

webpack 在前端构建领域有着举足轻重的地位，从最初的配置工具，逐渐演变为强大的构建工具，不仅仅用于资源构建，还可以通过开发插件，拓展更多可能性。本文将带你领略 webpack 插件开发的魅力，打造一款可以压缩构建资源为 zip 包的 webpack 插件，帮助你轻松部署项目。

构建目的

webpack 插件开发，可以让我们从 webpack 配置工程师，深入理解 webpack 工作机制及原理，然后走向 webpack 开发工程师。那选择开发压缩打包 zip 的 webpack，是因为项目部署经常需要将编译构建的项目打包成一个 zip 包，再分发到服务器进行部署，这样不仅能够减小体积，而且方便管理。但是，原生 webpack 并不支持直接压缩打包 zip 包，因此需要开发一个插件来实现这个需求。

前期准备

1. 安装 webpack

npm install webpack --save-dev

2. 安装 webpack 插件开发工具包

npm install webpack-cli --save-dev

插件开发

1. 创建 webpack 插件

在项目根目录创建一个文件，命名为 CompressPlugin.js，并添加如下代码：

class CompressPlugin {
  constructor(options) {
    this.options = options || {};
  }

  apply(compiler) {
    // 监听 webpack 构建完成事件
    compiler.hooks.afterEmit.tap('CompressPlugin', (compilation) => {
      // 获取构建产物目录
      const outputPath = compilation.outputOptions.path;

      // 使用压缩工具压缩构建产物
      const { execSync } = require('child_process');
      execSync(`zip -r ${outputPath}/build.zip ${outputPath}/build`);
    });
  }
}

module.exports = CompressPlugin;

2. 在 webpack 配置中使用插件

在 webpack 配置文件中，添加如下代码：

const CompressPlugin = require('./CompressPlugin');

module.exports = {
  // ...其他配置

  plugins: [
    new CompressPlugin()
  ]
};

3. 运行 webpack

npx webpack

使用效果

运行 webpack 后，会在构建产物目录下生成一个名为 build.zip 的压缩包，其中包含了所有构建产物。

总结

通过开发这款 webpack 插件，我们不仅能够轻松压缩打包项目资源，而且对 webpack 的工作机制和原理有了更深入的了解。webpack 插件开发是一个非常有趣的过程，它可以让你充分发挥创意，开发出各种各样的插件来满足你的需求。希望本文能激发你的灵感，让你在 webpack 插件开发的道路上越走越远。