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?