I am using latest version of webpack 5.3.2 with "clean-webpack-plugin": "^3.0.0". And apparently the plugin does not clean dist folder when I build.
Here's my webpack info:
Binaries:Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/nodeYarn: 1.22.4 - ~/.nvm/versions/node/v12.18.1/bin/yarnnpm: 6.14.8 - ~/.nvm/versions/node/v12.18.1/bin/npmBrowsers:Chrome: 86.0.4240.111Firefox: 82.0Packages: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.0webpack: 5.3.2And here's my webpack config:
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']}}Even when I enable verbose option I see no logs and the plugin doesn't clean.
Best Answer
From webpack v5, you can remove the clean-webpack-plugin plugin and use the output.clean option in your webpack config:
output: {filename: 'utils.min.js',clean: true,}Apparently when you specify an option.output(in my case for the customization of the output bundle name) clean-webpack-plugin will also need you to specify the path or else the plugin will be disabled with no error!:
output: {filename: 'utils.min.js',path: path.resolve(__dirname, 'dist')},