clean-webpack-plugin: Unexpected removal of `background-image` files

Steps to reproduce

cd /path/to/project
npm init -y
npm install -D webpack webpack-cli style-loader css-loader mini-css-extract-plugin file-loader clean-webpack-plugin
Code to reproduce

package.json scripts:

    "build": "webpack --mode production",
    "dev": "webpack --mode development --watch",

webpack.config.js:

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

var config = {
  entry: {
    main: './src/main.js',
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'build/app.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        loader: 'file-loader',
        options: {
          outputPath: 'build/images',
          name: '[name].[hash:7].[ext]',
        },
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'build/app.css',
    }),
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [ 'build/**/*', ],
    }),
  ],
}

module.exports = config

src/assets/images/bg.png: any dummy image (e.g. https://dummyimage.com/600x400/000/fff).

src/css/app.css:

.whatever {
  background-image: url('../assets/images/bg.png');
}

src/main.js:

import './css/app.css'

npm run dev
Save src/css/app.css

Observed behavior

bg.png unexpectedly disappears (from public/build/images).

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 11
Comments: 15

Commits related to this issue

Dont remove generated assets by minicss-extract-plugin in watch mode Work around for a bug in the clean-webpack-plugin: https://github.com/johnagan/clean-webpack-plugin/issues/159 — committed to freshheads/webpack-config-builder by deleted user 5 years ago

Most upvoted comments

Same problem here, all images are deleted and never recreated. It happens only in watch mode. As soon as a file is modified, the plugin does refresh css and js, but erases images.

kaligrafy on Sep 10, 2019

@chrisblossom, i mean that the described behavior is unexpected (background-image files aren’t stale assets) and should be fixed. Or maybe i’m missing something?

aaaatpdev on Nov 20, 2019

I have the same issue with fonts that are extracted via the minicss-extract-plugin.

jvandesande on Oct 2, 2019

You can use remove-files-webpack-plugin for this.

If i’m get it right: in watch mode need to delete all except files which in public/build/images folder. Here is solution with that plugin.

Config:

plugins: [
  new RemovePlugin({
    // in watch mode (only in "watch" mode, not "normal" mode!) 
    // remove all files, folders and subfolders from `./public` except 
    // `./public/build/images` folder (and files which included in that folder).
    watch: {
      root: './public',
      test: [
        {
          folder: '.',
          method: () => true,
          recursive: true
        }
      ],
      exclude: [
        './build/images'
      ]
    }
  })
]

Note: i’m the creator of this plugin, so, it’s a bit of an advertisement.

Amaimersion on Feb 27, 2020

I’m experiencing this issue as well:

When I do a regular “production” build, All my files get copied over correctly. However, on “watch” builds, the files get copied over on the initial build, but on any change, all the files copied over by copy-webbpack-plugin get deleted (and are not copied over again).

Probably related to webpack-contrib/copy-webpack-plugin#385, webpack-contrib/copy-webpack-plugin#261 and statianzo/webpack-livereload-plugin#53

marekdedic on Sep 28, 2019