I am having trouble with webpack and react serving static images on webpack dev server.
This is my currenct folder structure

As you can see I have a assets folder witch holds all my images This is my webpack entry and output configuration

Where client entry is source of my react project CLIENT_ENTRY: path.join(process.cwd(), 'src/client/index.jsx')
Now here is my output in BASH when webpack has done its part

And here is where I am trying to load images from assets folder in root of the project

Only the import works witch is expected.
I have tried to change the output and public path like so in webpack path: path.resolve(__dirname, 'dist'), publicPath: '/',
path: path.resolve(__dirname, 'dist/assets'), publicPath: '/assets/',
path: path.resolve(__dirname, 'dist'), publicPath: '/assets',
path: path.resolve(__dirname, 'dist'), publicPath: '/assets/',
etc.. etc..
If someone could help me that would be great
In your webpack.config.js, you will need to serve the assets folder as well.
{
  ...webpack,
  devServer: {
    contentBase: [__dirname + '/public', __dirname + '/assets'],
    ...webpack.devServer,
  },
}
                        To follow the idea behind webpack you need to process assets from your source to your target.
Therefore, add your images to a relative path in your source (where your entry is, essentially) and add a loader for the images (and perhaps other things) as such:
{
    test: /\.(woff2?|jpe?g|png|gif|ico)$/, 
    use: 'file-loader?name=./assets/images/[name].[ext]'
}
Just update the relative path of the outputs to the assets/images and they should be able to load.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With