Images with webpack and reactJS



I am trying to build a react app, and i want to serve a local image, which seems really difficult.

so i have the project in:


in this directory webpack.config.js lives, which is:

module.exports = {
    entry: './index.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    module: {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    babelrc: false,
                    presets: ["env", "react"],
                    plugins: ["transform-class-properties"]

index.js has the following:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App.jsx'

    <App />,

Now for one of the components (~/projects/chatApp/frontend/components/channel/Channel.jsx) i want an image, but i am baffled by the documentation:

i think my understanding of webpack is to global and abstract, how is webpack used for serving the images in react? isn’t there a simpler way?


okay, wow, i made it work. But i do not understand.

I found this:

which i followed, but i just copy pasted. No idea how or why its working

now i do not dare to touch webpack again


haha… you solved your own problem… is it just me or is it kinda funny?