How to set delete the old bundle with webpack -watch?

I wish you health!
In General, such problem: there is a folder /build, in this folder collects webpack Assembly. If you collect once (via the command webpack) then everything works fine - the old Assembly is cleaned.
If you collect each time you edit a file (via the command webpack -w) webpack gathers the Assembly, but the old build is not cleared.

Here is the config webpage
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');

module.exports = {
 context: __dirname
 //heng entry file
 entry: "./app/app.js",
 output: {
 path: __dirname + "/build",
 filename: "bundle.[hash].js",
 chunkFilename : "../build/chunks/[hash].[chunkhash].js"
},
 optimization: {
 minimizer: [
 new TerserJSPlugin({}), 
 new OptimizeCSSAssetsPlugin({}),
],
 splitChunks: {
 cacheGroups: {
 common_vendors: {
 test: /([\\/]app[\\/]core)|([\\/]node_modules[\\/])/,
 name: 'vendors', // the name of the chunk
 chunks: 'initial',
 enforce: true,
 filename: '[name].[chunkhash].js'
}
}
}
},
 module: {
 rules: [
{
 test: /\.css$/,
 use: [
{
 loader: MiniCssExtractPlugin.loader
 options: {
 // you can specify a publicPath here
 // by default it uses publicPath in webpackOptions.output
 publicPath: '../',
 hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
],
},
],
},
 plugins: [
 new CleanWebpackPlugin(),
 new HtmlWebpackPlugin({
 minify: { collapseWhitespace: true },
 template: 'app/index.html', 
 filename: './../index.html'
}),
 new MiniCssExtractPlugin({
 // Options similar to the same options in webpackOptions.output
 // all options are optional
 filename: 'app.[hash].css'
})
]
}
April 19th 20 at 12:21
1 answer
April 19th 20 at 12:23
used-watch not the best option. It is better to use webpack-dev-server for sites without a backend or configure HMR for server express. Articles online about this a lot. This will allow you to store your Assembly in memory and easy to upgrade, not in a folder on the disk. Folder to collect only for production.

Find more questions by tags WebpackJavaScript