Registry / devops / clean-webpack-plugin

clean-webpack-plugin

JSON →
library4.0.0jsnpmunverified

clean-webpack-plugin is a utility designed to clean or remove build folders before or after webpack compilations. Its current stable version is 4.0.0, which supports Node.js 14+ and webpack 5+. The plugin typically sees major version updates to align with breaking changes in Node.js and webpack, ensuring compatibility with the latest ecosystem features. Key differentiators include its simplicity, with no configuration needed for standard usage (cleaning webpack's output.path directory), and its intelligent handling of webpack's watch mode where it only removes assets generated by webpack that are no longer in use. It leverages the 'del' package for robust globbing support, allowing for flexible pattern matching to define what should be cleaned. It is a fundamental tool for maintaining clean build directories in webpack projects.

npm install clean-webpack-plugin
INSTALL
IMPORT
SIG · CLEAN-WEBPACK-PLUG
C
clean-webpack-plugin
devopsjavascriptv4.0.0
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

CleanWebpackPlugin
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
import CleanWebpackPlugin from 'clean-webpack-plugin';
Since v3.0.0, CleanWebpackPlugin is a named export. Default import is incorrect.
CleanWebpackPlugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
Since v3.0.0, CleanWebpackPlugin is a named export and requires destructuring in CommonJS.

This configuration demonstrates the basic setup for `clean-webpack-plugin` in a webpack project. It initializes the plugin with its default settings, which automatically cleans the output directory before the initial build and manages stale assets during subsequent rebuilds, ensuring a clean build folder for a TypeScript project.

import webpack from 'webpack'; import path from 'path'; import { CleanWebpackPlugin } from 'clean-webpack-plugin'; const webpackConfig: webpack.Configuration = { mode: 'development', // or 'production' entry: './src/index.ts', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', // To demonstrate clean-webpack-plugin, disable Webpack 5's built-in clean clean: false, }, resolve: { extensions: ['.ts', '.js'], }, module: { rules: [ { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/, }, ], }, plugins: [ /** * The CleanWebpackPlugin will remove all files inside webpack's output.path directory * (e.g., `<PROJECT_DIR>/dist/`) once before the initial build. During rebuilds in watch mode, * it intelligently removes only the webpack assets that are no longer in use. This example * uses default options, which is often sufficient for most projects. */ new CleanWebpackPlugin(), ], }; // To use this configuration with the webpack CLI, save it as webpack.config.ts // or webpack.config.js and run 'webpack' or 'webpack serve'. // Alternatively, it can be consumed programmatically: // const compiler = webpack(webpackConfig); // compiler.run((err, stats) => { // if (err) { console.error(err); return; } // console.log(stats?.toString({ colors: true })); // }); export default webpackConfig;
Debug
Known issues
breakingVersion 4.0.0 dropped support for Node.js 8 and webpack 3. Ensure your environment meets the new requirements (Node.js 10+, webpack 4+).
fix
Upgrade Node.js to version 10 or higher and webpack to version 4 or higher, or use clean-webpack-plugin v3.x.
affects: 4.0.0
breakingVersion 3.0.0 changed the export from a default export to a named export `CleanWebpackPlugin`. Direct import without destructuring will fail.
fix
Update your import statements to `import { CleanWebpackPlugin } from 'clean-webpack-plugin';` for ESM or `const { CleanWebpackPlugin } = require('clean-webpack-plugin');` for CommonJS.
affects: >=3.0.0
breakingVersion 3.0.0 dropped support for Node.js 6 and webpack 2. Projects using these older versions must remain on clean-webpack-plugin v2.x.
fix
Upgrade Node.js to version 8 or higher and webpack to version 3 or higher, or use clean-webpack-plugin v2.x.
affects: 3.0.0
breakingIn v3.0.0, the `cleanOnceBeforeBuildPatterns` option now uses webpack's `emit` hook instead of `compile`. This might slightly alter the timing of the cleanup process.
fix
Review build logs to ensure cleanup occurs at the expected phase. No code changes are typically required unless specific timing dependencies exist.
affects: >=3.0.0
gotchaThe `cleanOnceBeforeBuildPatterns` option specifies patterns relative to webpack's `output.path` directory. For paths outside `output.path`, full absolute paths must be provided (e.g., `path.join(process.cwd(), 'build/**/*')`).
fix
When cleaning directories outside of webpack's output path, use `path.join(process.cwd(), 'your/path/**/*')` to provide an absolute path.
affects: >=1.0.0
Errors
Common errors & fixes
TypeError: CleanWebpackPlugin is not a constructor
Attempting to instantiate the plugin without destructuring the named export, often seen with `new CleanWebpackPlugin()` after upgrading to v3+.
fix
Correct the import/require statement to use destructuring: `import { CleanWebpackPlugin } from 'clean-webpack-plugin';` or `const { CleanWebpackPlugin } = require('clean-webpack-plugin');`
Error: Cannot find module 'clean-webpack-plugin'
Typically indicates that the package is not installed or there's a problem with module resolution in the environment, possibly due to unsupported Node.js or webpack versions.
fix
Ensure the package is installed (`npm install --save-dev clean-webpack-plugin`) and that your Node.js and webpack versions meet the plugin's requirements (Node.js 10+ and webpack 4+ for v4.0.0).
Files are not being cleaned or incorrect files are removed from my build directory.
Incorrect configuration of `cleanOnceBeforeBuildPatterns` or misunderstanding its default behavior relative to `output.path` and watch mode.
fix
First, test with `dry: true` and `verbose: true` in the plugin options to log actions without actual file deletion. Review `cleanOnceBeforeBuildPatterns` to ensure glob patterns are correct and paths are absolute if outside `output.path`. Remember that by default, it cleans `output.path` before build and stale webpack assets during rebuilds.
Upgrade
Version history
4.0.0latest on npm
Audit
Dependencies
webpackrequiredRequired as a peer dependency for webpack integration.
Agent activity
7 hits · last 30 days
node
6
Resources