Clean Webpack Plugin :保持干净的构建

“CleanWebpackPlugin”是一个流行的插件 Webpack,可帮助您在生成新文件之前清理指定的目录来管理构建输出。 这对于防止旧的或不必要的文件在构建目录中累积非常有用。 下面简单介绍一下 CleanWebpackPlugin 的使用方法:

安装

首先,确保您已安装 Webpack 并 webpack-cli 安装在您的项目中,如前面的说明所示。 然后,安装 CleanWebpackPlugin:

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

配置

打开 webpack.config.js 文件并导入插件:

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

在数组内部 plugins,实例化 CleanWebpackPlugin

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

默认情况下,插件将清除配置 output.path 中定义的内容 Webpack。

自定义配置

您可以通过将选项传递给其构造函数来自定义 的行为 CleanWebpackPlugin。 例如:

new CleanWebpackPlugin({  
  cleanOnceBeforeBuildPatterns: ['**/*', '!importantFile.txt']  
})  

在此示例中,除 importantFile.txt.

跑步 Webpack

当您运行 Webpack 构建项目时, CleanWebpackPlugin 将在生成新的构建文件之前自动清理指定的目录。

请记住参考官方文档以 clean-webpack-plugin 获取更高级的配置和选项。 该插件可以极大地帮助维护干净的构建输出目录并避免不必要的混乱。