Having an issue with Webpack where it's generating duplicate images, one of which is broken.
I have an original image image, and after running Webpack, two duplicates are created. One works fine: image, but the other one is broken: image. I'm using CSS to apply the background-image style for a class called .logo like this: image. However, once the code is compiled, it ends up linking to the non-working image here: image, and I can't figure out why :(
If anyone could help me resolve this issue, I would greatly appreciate it! Thank you in advance!!!
Here is 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']
}
]
}
}