Within one of the components located in my client/components directory, I have imported three images from the public/images folder. Recently, webpack generated hashed files for each image such as:
0e8f1e62f0fe5b5e6d78b2d9f4116311.pngCurrently, I am facing an issue while deploying the application on a proxy server where the hashed files are successfully downloaded upon page load but the images are not being displayed. I suspect that resolving the original webpack problem might also resolve this issue with the proxy server, although I cannot be certain.
root
├── client
│ └── components
├── database
├── public
│ ├── images
│ ├── app.js
│ └── index.html
└── server
└── server.js
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, './client/index.js'),
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'env']
},
},
{
test: /\.png$/,
use: 'file-loader'
}
],
},
output: {
path: path.join(__dirname, '/public'),
filename: 'app.js',
}
};
The file structure outlined above demonstrates my current project setup. Although I have attempted to adjust my configuration settings, I find it challenging to configure webpack appropriately. Any assistance regarding these issues would be greatly appreciated.