CleanWebpackPlugin 在 Webpack 5 中无法清理

Question

我正在使用最新版本的 webpack 5.3.2 和“clean-webpack-plugin”：“^3.0.0”。显然，当我构建时，该插件不会清理 dist 文件夹。

这是我的网页包信息：

  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']

  }

}

即使我启用详细选项，我也看不到任何日志，并且插件也无法清理。

Answer 1

从 webpack v5 开始，您可以删除该clean-webpack-plugin插件并在 webpack 配置中使用 output.clean 选项： output: {    filename: 'utils.min.js',    clean: true, }

Answer 2

显然，当您指定 option.output （在我的例子中是用于自定义输出包名称）时，clean-webpack-plugin 还需要您指定路径，否则插件将被禁用而不会出现错误！：  output: {    filename: 'utils.min.js',    path: path.resolve(__dirname, 'dist')  },