Clean-Webpack-Plugin 巧用 Clear 模式，提升构建效率

2023-10-22 12:29:11

一、了解 Clean-Webpack-Plugin

Clean-Webpack-Plugin 是一款专为 Webpack 打造的清理插件，可以帮助我们清除构建过程中产生的文件和目录。它支持多种模式，其中 Clear 模式可以清除整个输出目录及其内容。

二、安装 Clean-Webpack-Plugin

首先，我们需要安装 Clean-Webpack-Plugin：

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

三、配置 Clean-Webpack-Plugin

在 webpack 配置文件中，我们可以使用以下代码配置 Clean-Webpack-Plugin：

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

module.exports = {
  // ... 其他 webpack 配置
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ['dist/*']
    })
  ]
};

其中，cleanOnceBeforeBuildPatterns 选项指定了需要清理的目录和文件。在这个例子中，我们将清理 dist 目录下的所有文件。

四、使用 Clear 模式

Clean-Webpack-Plugin 还提供了 Clear 模式，可以让我们在每次构建之前自动清理输出目录。

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

module.exports = {
  // ... 其他 webpack 配置
  plugins: [
    new CleanWebpackPlugin({
      cleanStaleWebpackAssets: false
    })
  ]
};