CleanWebpackPlugin无法在Webpack 5中清理

问题描述

我正在将Webpack 5.3.2的最新版本与“ clean-webpack-plugin”：“ ^ 3.0.0”一起使用。显然，在我构建时，该插件无法清理dist文件夹。

这是我的Webpack信息：

  Binaries:
    Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v12.18.1/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v12.18.1/bin/npm
  Browsers:
    Chrome: 86.0.4240.111
    Firefox: 82.0
  Packages:
    clean-webpack-plugin: ^3.0.0 => 3.0.0 
    copy-webpack-plugin: ^6.2.1 => 6.2.1 
    terser-webpack-plugin: ^5.0.3 => 5.0.3 
    webpack: ^5.3.2 => 5.3.2 
    webpack-cli: ^4.1.0 => 4.1.0 
  Global Packages:
    webpack-cli: 4.1.0
    webpack: 5.3.2

这是我的webpack配置：

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

module.exports = {
  mode: 'development',entry: './src/index.ts',plugins: [
    new CleanWebpackPlugin({
  cleanOnceBeforeBuildPatterns: [path.join(__dirname,'dist/**/*')]
}),new webpack.ProgressPlugin(),new CopyPlugin({
      patterns: [
        { from: 'src',to: 'src' },{ from: 'package.json' },{ from: 'README.md' }
      ],}),],output: {
    filename: 'utils.min.js'
  },module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,loader: 'ts-loader',include: [path.resolve(__dirname,'src')],exclude: [/node_modules/]
      },{
        test: /\.m?js$/,exclude: [/node_modules/],use: {
          loader: 'babel-loader',options: {
            presets: ['@babel/preset-env']
          }
        }
      }]
  },resolve: {
    extensions: ['.tsx','.ts','.js']
  }
}

即使启用了详细选项，我也看不到任何日志，并且插件也不干净。

解决方法

从 webpack v5 开始，您可以删除 clean-webpack-plugin 插件并在 webpack 配置中使用 output.clean 选项：

 output: {
    filename: 'utils.min.js',clean: true,}

,

显然，当您指定一个选项时。output（在我的情况下，用于自定义输出包名称）clean-webpack-plugin 还需要您指定路径，否则插件将是禁用，没有错误！：

  output: {
    filename: 'utils.min.js',path: path.resolve(__dirname,'dist')
  },