Images with webpack and reactJS

Community Off Topic
#1

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:

~/projects/chatApp/frontend/

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

module.exports = {
    entry: './index.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        rules:[
            {
                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'


ReactDOM.render(
    <App />,
    document.getElementById('root')
)

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

https://github.com/webpack-contrib/file-loader

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?

#2

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

I found this:

https://julienrenaux.fr/2015/03/30/introduction-to-webpack-with-practical-examples/

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

now i do not dare to touch webpack again

2 Likes
#3

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