Webpack does not keep images in my `built` folder

Question

Webpack is moving my images from my src folder to my built folder as it should. When I run Development using my Task Runner or npm run-script dev the images I can see are moved from src to my built folder. The issue I am experiencing is whenever I make a change to my CSS or HTML, I do receive a successful build, but the images then get removed from the built folder and thus fail to load.

Lots, including this article on S.O tell me I need to use 'copy-webpack-plugin', and file-loader, but I have these.

const CopyWebpackPlugin = require('copy-webpack-plugin');

My entry file looks like this

module.exports = {
    entry: {
        app: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, './built'),
        publicPath: '/built'
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: false // set to true if you want JS source maps
            }),
            new OptimizeCSSAssetsPlugin()
        ]
    },
    plugins: [    
        // Clean built folder.
        new CleanWebpackPlugin({
            "verbose": true // Write logs to console.
        }),

        // avoid publishing when compilation failed.
        new webpack.NoEmitOnErrorsPlugin(),

        // Move & compress/process images
        new CopyWebpackPlugin(
            [
                {
                    from: path.resolve(__dirname, './src/img/'),
                    to: path.resolve(__dirname, './built/img/')
                },
                {
                    from: path.resolve(__dirname, './src/fonts/'),
                    to: path.resolve(__dirname, './built/fonts/')
                },
            ]),

        new ImageminPlugin({
            test: /\.(jpe?g|png|gif|svg)$/i,
            pngquant: {
                quality: '95-100'
            }
        }),

        new HtmlWebpackPlugin({
            inject: "body",
            filename: "../Views/Shared/_Layout.cshtml",
            template: "./Views/Shared/_Layout_Template.cshtml"
        }),

        new WebpackNotifierPlugin(),
    ],
    module: {
        rules: [
            {
                // Enable ES6 transpilation 
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader', 'eslint-loader']
            },
            {
                test: /\.((s)?css)$/,
                use: [
                    { loader: "style-loader" },
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        // Interprets `@import` and `url()` like `import/require()` and will resolve them
                        loader: 'css-loader'
                    },
                    {
                        // Loader for webpack to process CSS with PostCSS
                        loader: 'postcss-loader',
                        options: {
                            plugins: function () {
                                return [
                                    require('autoprefixer')
                                ];
                            },
                        }
                    },
                    {
                        loader: 'resolve-url-loader'
                    },
                    {
                        // Loads a SASS/SCSS file and compiles it to CSS
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                            sourceMapContents: false
                        }
                    }
                ]
            },
            // Font files will be handled here
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [{
                    loader: 'file-loader'
                }]
            },
            // Image files will be handled here
            {
                test: /\.(jpg|png|gif|svg)$/,
                use: [{
                    loader: 'file-loader'
                }]
            },
            // All files with ".html" will be handled 
            { test: /\.html$/, loader: "html-loader" }
        ]
    },

};

As I say, what I can't see is why when I first run the script, I get a 'Build Successful', but then when I make a change and Webpack does it magic, the image is then removed from my built folder.

I am referencing my files like

<img src="/built/img/example.png">

Answer 1

Try setting copyUnmodified option. It looks like CleanWebpackPlugin in watch mode cleans everything on every update but CopyWebpackPlugin doesn't copy the files again.

        new CopyWebpackPlugin(
        [
            {
                from: path.resolve(__dirname, './src/img/'),
                to: path.resolve(__dirname, './built/img/')
            },
            {
                from: path.resolve(__dirname, './src/fonts/'),
                to: path.resolve(__dirname, './built/fonts/')
            },
        ], {
            copyUnmodified: true
        }),