webpack配置之---output.clean

output.clean

在 Webpack 5 中，output.clean 配置项是一个新的功能，旨在自动清理输出目录（例如 dist 文件夹），在每次构建时删除其中的旧文件。这个配置项使得构建输出更加干净，避免了存留旧的、不再需要的文件。

1. 基本功能

output.clean 可以用来控制 Webpack 在构建前是否清除输出目录中的文件。通常，WebPack 会将新构建的文件输出到一个指定的目录（比如 dist），并且保留先前构建的文件。使用 output.clean 可以在每次构建时自动删除旧的文件，确保输出目录的清洁。

2. 配置方式

output.clean 可以是一个布尔值，或者是一个对象，提供更细粒度的配置选项。

2.1 基本配置（布尔值）

如果设置为 true，Webpack 将在每次构建之前清空输出目录中的所有文件。

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    clean: true  // 在每次构建时清理 dist 目录
  }
};

2.2 细粒度配置（对象）

output.clean 也可以是一个对象，提供更多配置项来控制如何清理输出目录。

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    clean: {
      keep: /[\\/]static[\\/]/,  // 保留 static 目录下的文件
      dangerouslyAllowCleanPatternsOutsideProject: true  // 允许删除项目外的文件（不推荐使用）
    }
  }
};

3. 可用配置选项

当 output.clean 设置为对象时，你可以配置以下选项：

keep: 可以设置一个正则表达式或一个字符串数组，表示要保留的文件或目录。如果你希望保留输出目录下的某些文件或目录，可以使用这个选项。例如，保留 static 目录下的文件。

keep: /[\\/]static[\\/]/,  // 保留 static 目录下的文件

dangerouslyAllowCleanPatternsOutsideProject: 如果设置为 true，Webpack 将允许删除项目外部的文件（即输出目录之外的文件）。这个选项应该谨慎使用，因为它可能会删除你不希望删除的文件。

dangerouslyAllowCleanPatternsOutsideProject: true  // 不推荐使用，可能删除项目外的文件

4. 默认行为

如果不配置 output.clean，Webpack 默认不会清理输出目录。这意味着，如果你在一个持续集成的环境中构建或频繁构建时，旧文件可能会留在输出目录里，造成不必要的文件堆积。

5. 性能影响

启用 output.clean 时，每次构建前都会删除输出目录中的文件。如果你有非常大的输出目录，可能会导致一些性能上的开销。不过在多数情况下，这个过程是快速的，而且可以确保构建输出是干净的。

6. 结合插件使用

虽然 output.clean 可以清理构建输出目录，但在一些复杂的构建中，你可能还需要与其他插件（如 clean-webpack-plugin）配合使用，以便更精细地控制输出目录清理的过程。通常，output.clean 已经足够满足常规需求。

7. 总结

output.clean：用于在构建时清理输出目录，避免残留旧的构建文件。
布尔值配置：设置为 true 时，Webpack 每次构建前会清理输出目录。
对象配置：可以用来保留特定文件或目录，或者允许删除项目外的文件。
推荐使用：推荐开启 output.clean，以确保输出目录的清洁，避免过时的文件干扰构建。

秒客网