Webpack 的简易插件：CleanWebpackPlugin 的手工制作

2024-02-21 17:21:56

Webpack 插件简介

Webpack 是一个现代化的JavaScript打包工具，它能够将许多小的JavaScript文件打包成更少的、更易于管理的JavaScript文件。Webpack 插件是一种可以扩展Webpack功能的工具，允许您在Webpack构建过程中执行自定义操作。

手写 CleanWebpackPlugin

为了更好地理解Webpack插件的工作原理，我们将从头开始编写一个清理构建目录的插件。CleanWebpackPlugin 会在每次构建时自动清理构建目录中的文件。

步骤 1：创建插件文件

首先，我们需要创建一个插件文件，我们将使用JavaScript来编写这个插件。创建一个新的JavaScript文件，例如 clean-webpack-plugin.js。

// clean-webpack-plugin.js

// 导入必要的Webpack库
const webpack = require("webpack");

// 创建插件类
class CleanWebpackPlugin {
  // 插件的应用方法
  apply(compiler) {
    // 监听compiler的compilation事件
    compiler.hooks.compilation.tap("CleanWebpackPlugin", (compilation) => {
      // 在compilation的seal阶段执行清理操作
      compilation.hooks.seal.tap("CleanWebpackPlugin", () => {
        // 清除构建目录中的文件
        // ...
      });
    });
  }
}

// 导出插件类
module.exports = CleanWebpackPlugin;

步骤 2：安装并使用插件

将clean-webpack-plugin.js放在您的项目中，然后在您的Webpack配置中添加以下代码：

// webpack.config.js

// 安装CleanWebpackPlugin
const CleanWebpackPlugin = require("./clean-webpack-plugin.js");

// 在Webpack配置中添加插件
module.exports = {
  // 其他Webpack配置
  plugins: [
    new CleanWebpackPlugin()
  ]
};