clean-webpack-plugin 清除 dist 文件夹 - JavaScript

简介

clean-webpack-plugin 是一个用于清除 webpack 构建产物的插件。它可以自动删除指定文件夹中的旧构建结果，以确保每次构建都是从一个干净的状态开始。

功能特性

• 通过配置简单地删除指定的文件夹或文件
• 支持异步删除操作，可在构建完成后执行
• 可以根据需要跳过部分文件夹或文件
• 可以通过包含和排除规则来细粒度地控制清除的范围

安装

可以通过 npm 来安装 clean-webpack-plugin：

npm install clean-webpack-plugin --save-dev

使用示例

以下是一些使用 clean-webpack-plugin 的示例:

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

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

  plugins: [
    new CleanWebpackPlugin(),
  ],
};

在上面的示例中，CleanWebpackPlugin 会自动清除 webpack 输出的 output.path 目录中的文件。

配置选项

clean-webpack-plugin 提供了一些配置选项，以满足各种清除需求。以下是一些常用的配置选项示例：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

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

  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ['**/*', '!index.html'],
      cleanAfterEveryBuildPatterns: ['!index.html'],
      verbose: true
    }),
  ],
};

• cleanOnceBeforeBuildPatterns: 指定在每次构建之前需要删除的文件或文件夹的匹配模式数组。
• cleanAfterEveryBuildPatterns: 指定在每次构建之后需要删除的文件或文件夹的匹配模式数组。
• verbose: 控制插件是否在控制台输出日志信息。

更多配置选项和用法可以参考 clean-webpack-plugin 文档。

结论

通过 clean-webpack-plugin 插件，我们可以轻松地清理 webpack 构建结果，以确保每次构建都是从一个干净的状态开始。它是一个非常有用的插件，特别是在不同编译之间需要保持一致性和干净环境的情况下。