Webpack generates duplicate images

Question

I have a problem, Webpack generates duplicate images, while one of the duplicates is broken.

I have an image image, and two duplicates are generated from it, a working one: image, and a non-working one: image. I 'm in CSS for a class .logo I'm hanging the background-image style: image. After compiling the code, it inserts the path to the non-working image: image, and I don't understand what's the matter :(

Please help me fix it, Thanks in advance!!!

My webpack.config.js:

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
    context: path.resolve(__dirname, 'src'),
    mode: 'development',
    entry: {
        main: './index.js',
        analytics: './analytics.js'
    },
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HTMLWebpackPlugin({
            title: 'Webpack Tenzo',
            template: './index.html'
        }),
        new CleanWebpackPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|jpg|svg|gif)$/,
                use: ['file-loader']
            }
        ]
    }
}

I think this is fine as only one will be loaded in front end. I am not sure what the other image is for, but that shouldn't be loaded on frontend. — illiteratewriter, Nov 20 '21 at 16:23
@illiteratewriter Didn't quite understand what you mean. In CSS, paths lead to an extra duplicate that is broken, I don't see any good in this. I need a solution to this problem, but thank you anyway! — Tenzo, Nov 20 '21 at 17:09
Have you tried this solution? https://stackoverflow.com/questions/66907267/webpack-file-loader-duplicates-files — Sebastian Thadewald, Nov 20 '21 at 17:37
I solved the problem. The point was that it was necessary to use "assets" instead of leaders such as "file-loader" — Tenzo, Feb 08 '22 at 13:29

score 2 · Accepted Answer · edited Feb 08 '22 at 14:23

2

I solved the problem. The point was that it was necessary to use "assets" instead of leaders such as "file-loader".

edited Feb 08 '22 at 14:23

ouflak

2,458
10
44
49

answered Feb 08 '22 at 13:30

Tenzo

21
4

for anyone else with this issue, file-loader is depreciated as of v5 and assets module is recommended per https://github.com/webpack-contrib/file-loader – Some Juan Dec 03 '22 at 04:22

Webpack generates duplicate images

1 Answers1