webpack-dev-middleware: `output.clean : true` is not working with dev server

Bug report

What is the current behavior?

output.clean: true is not working with webpack dev server, when building for the first time, or when project is rebuilding due to sources change.

Description

I was trying to configure webpack to clean the dis folder for one of my projects, and decided to use brand new output.clean configuration as I’m using "webpack": "^5.21.2" and this config is supported starting from version 5.20

Config works fine in production build, but when I start webpack dev server with writeToDisk: true webpack doesn’t clean the dist/ directory neither upon the start of the dev server nor upon project rebuild.

Initially I though that it might be not supposed to work with dev server, but changing

output: {
    ...
    clean: true
  },

output: {
    ...
    clean: {
      dry: true,
    }
  },

does log what files it should delete when rebuilding project:

If the current behavior is a bug, please provide the steps to reproduce.

clone my sandbox created for debugging this issue https://github.com/vovkvlad/webpack_clean-test
run npm i in the root of the repository
run npm start to start the application
go to src/App.js and make any change so that webpack catch it up and rebuild the project

Expected behavior:

old files from dist/ folder should me removed, and dist/ folder should contain one instance of each bundled file

Current behavior:

dist/ folder is not being cleaned, and contains several files for each bundled files:

What is the expected behavior? old files from dist/ folder should me removed, and dist/ folder should contain one instance of each bundled file

Other relevant information: webpack version: webpack 5.27.1 Node.js version: v14.15.0 Operating System: macOs Catalina Version 10.15.7 Additional tools:

This issue was moved from webpack/webpack#12949 by @alexander-akait. Original issue was by @vovkvlad.

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 21
Comments: 21 (5 by maintainers)

Most upvoted comments

I can reproduce the problem with Webpack 5.36.

    output: {
        clean: true,
    },
    devServer: {
        writeToDisk: true,
    },

+10

daniele-orlando on May 5, 2021

I can reproduce that too with webpack 5.36.2 and webpack-dev-server 3.11.2 and the configuration:

output: {
    clean: true,
},
devServer: {
    writeToDisk: true,
}

mateusz-owczarek on May 7, 2021

No, it will be fixed in near future, we need layer fs

9 months later and still nothing. Is this “near future”?

Still happening with webpack 5.72.0 and webpack-dev-server 4.9.0.

VinnyFonseca on May 11, 2022

I just keep using clean-webpack-plugin then.

rudyhuynh on Jan 27, 2022

No, it will be fixed in near future, we need layer fs

alexander-akait on Aug 30, 2021

Yoooo, still nothing? xD

PanKarton on Jan 9, 2022

Same problem on webpack 5.65.0 and webpack-dev-server 4.6.0

ahmafi on Dec 25, 2021

Hello 😃 Just to let you know that I have the same issue with clean: true, but with webpack-hot-middleware which doesn’t use webpack-dev-server but only webpack-dev-middleware.

When I use webpack from cli, it works. When I use the process as a middleware, it works for my asset/resource type in module, but it doesn’t for the js files from the output configuration, these files are generated again each time without deletion.

Clean Webpack Plugin works fine from cli & from middleware.

webpack : 5.74.0 webpack-dev-middleware : 5.3.3 webpack-hot-middleware : 2.25.0

BigFax on Oct 26, 2022

😦

chavlji on Feb 24, 2022

Any updates on this? Still an issue with webpack 5.51.1 and webpack-dev-middleware 5.0.0.

aetherplex on Aug 27, 2021