Как настроить удаление старого бандла с webpack -watch?

Question

[Марат Линберг]

Здравия желаю!
В общем такая проблема: есть папка /build, в эту папку вебпак собирает сборку. Если собирать один раз (через команду webpack) то все работает отлично - старая сборка очищается.
Если собирать при каждом изменении файла (через команду webpack -w) то вебпак собирает сборку, но старая сборка не очищается.

Вот конфиг вебпака

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', // имя чанка
          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'
    })
  ]
}

Answer 1

[dark_king_13]

использовать -watch не лучший вариант. Лучше использовать webpack-dev-server для сайтов без серверной части или настраивать HMR для сервера на express. Статей в сети об этом много. Это позволит хранить твою сборку в памяти и легко обновлять, а не в папке на диске. В папку собирать только для продакшена.