A webpack plugin to remove/clean your build folder(s) before building
npm i clean-webpack-plugin --save-dev
const CleanWebpackPlugin = require('clean-webpack-plugin')
// webpack config
{
plugins: [
new CleanWebpackPlugin(paths [, {options}])
]
}
This is a modified version of WebPack's Plugin documentation that includes the Clean Plugin.
const CleanWebpackPlugin = require('clean-webpack-plugin'); //installed via npm
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');
// the path(s) that should be cleaned
let pathsToClean = [
'dist',
'build'
]
// the clean options to use
let cleanOptions = {
root: '/full/webpack/root/path',
exclude: ['shared.js'],
verbose: true,
dry: false
}
// sample WebPack config
const webpackConfig = {
entry: './path/to/my/entry/file.js',
output: {
filename: 'my-first-webpack.bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader'
}
]
},
plugins: [
new CleanWebpackPlugin(pathsToClean, cleanOptions),
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
}
An [array] of string paths to clean
[
'dist', // removes 'dist' folder
'build/*.*', // removes all files in 'build' folder
'web/*.js' // removes all JavaScript files in 'web' folder
]
{
// Absolute path to your webpack root folder (paths appended to this)
// Default: root of your package
root: __dirname,
// Write logs to console.
verbose: true,
// Use boolean "true" to test/emulate delete. (will not remove files).
// Default: false - remove files
dry: false,
// If true, remove files on recompile.
// Default: false
watch: false,
// Instead of removing whole path recursively,
// remove all path's content with exclusion of provided immediate children.
// Good for not removing shared files from build directories.
exclude: [ 'files', 'to', 'ignore' ]
}