لا يعرض Webpack صورة png في المتصفح باستخدام background-image

أنا أستخدم Webpack وأحاول استخدام صورة png لعرضها في متصفح Firefox الخاص بي. تكمن المشكلة في أن Webpack يقوم بإنشاء صورتين في مجلد dist 

 webpack.config.js

module: {
    rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.(jpe?g|png|gif|svg)$/,
            use: ['file-loader']

        }
    ]
}

.logo {
background-image: url('../assets/foto.png');
background-size: cover;
height: 200px;
width: 200px;
margin: 0 auto;}

 <div class="logo"></div>

 dist/ 
   - h74g3ffgf3ff34h76.png
   - analytics.54t54gg4.js
   - ab0d12j489gh4igh8.png
   - index.html
   - main.h74rg34u73f.js
 src/
     assets/
       - foto.png
     styles/
       - styles.css
   - analytics.js
   - index.html
   - script.js
- package-lock.json
- package.json
- webpack.config.js