清理构建目标文件夹的两种方式：webpack配置选项 VS clean-webpack-plugin插件

92. 清理构建目标文件夹的两种方式：webpack配置选项 VS clean-webpack-plugin插件

在 webpack 中，clean: true 是一项配置选项，而 clean-webpack-plugin 是一个插件。它们的作用是清理（删除）构建目标文件夹中的旧文件。

1. clean: true 配置选项：

在 webpack 的配置文件中，你可以使用 clean 配置选项来指定是否清理构建目标文件夹。当设置为 true 时，webpack 在每次构建之前会自动清理目标文件夹。这可以确保每次构建时都会生成一个干净的输出文件夹，删除旧的构建结果。

module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
};

2. clean-webpack-plugin 插件：

clean-webpack-plugin 是一个由 webpack 社区提供的插件，用于在构建之前清理输出目录。你需要通过 npm 安装该插件：

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

然后，在 webpack 配置文件中导入并配置该插件：

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

module.exports = {
  // ...
  plugins: [
    new CleanWebpackPlugin(),
  ],
};

使用 clean-webpack-plugin 插件，你可以更细粒度地控制清理的行为。该插件支持许多选项，允许你配置要清理的文件夹、排除某些文件或文件夹等。

主要区别和作用总结：

• clean: true 是 webpack 自带的配置选项，用于设置是否清理构建目标文件夹。它提供了基本的清理功能。
• clean-webpack-plugin 是一个插件，提供了更多的配置选项和灵活性。它可以更精确地控制清理行为，并且可以根据需要进行配置。

如果你只需要基本的清理功能，并且使用 webpack 自带的配置选项就能满足你的需求，那么使用 clean: true 就足够了。如果你需要更多的配置选项和灵活性，例如指定要清理的文件夹、排除某些文件或文件夹等，那么可以考虑使用 clean-webpack-plugin 插件。