I've been trying to learn how to use react over the last few days, along with putting together my own personal dev environment using webpack (which is also new to me)
One of the issues I've run into this morning is trying to load images (I was pretty surprised at how convoluted the process is!)
Anyway I've got a carousel component that I'm using 'react-slick' slider for, that works just fine but the image paths I've added to each slide are coming back as 404 no matter what I try.
Now from what I've managed to deduce from googling all day, webpack takes your images, and using file-loader, bundles them all up into your dist folder for production.
So far, so sensible.
The issue I've run into is that it doesn't seem to want to find my images. I've attached a screenshot of my carousel component so you can see how I'm trying to call in my images (i'm using import from .../...) And below that I've included my webpack config file. I can't see what else needs to be done here and I've reached the limit of my skills.
I'd really appreciate any help.
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({template: 'src/views/index.html', filename: 'index.html', inject: 'body'});
const CleanWebpackPlugin = require('clean-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
entry: {
app: './src/app.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
resolve: {
extensions: ['.js', '.jsx']
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader']
})
}, {
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true
}
}, {
loader: 'postcss-loader',
options: {
sourceMap: true
}
}, {
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
})
}, {
test: /\.(woff|woff2|eot|ttf)$/,
loader: 'url-loader?limit=100000'
}, {
test: /\.(jpe?g|png|gif|svg)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'img/',
publicPath: 'img/'
}
}]
}, {
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}, {
test: /\.jsx$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.html$/,
use: ['html-loader']
}
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new ExtractTextPlugin({filename: 'styles.css', disable: false, allChunks: true}),
new HtmlWebpackPlugin({filename: 'index.html', template: 'src/views/index.html', chunks: ['app']}),
HtmlWebpackPluginConfig,
new BrowserSyncPlugin(
// BrowserSync options
{
// browse to http://localhost:3000/ during development
host: 'localhost',
port: 3000,
// proxy the Webpack Dev Server endpoint
// (which should be serving on http://localhost:3100/)
// through BrowserSync
proxy: 'http://localhost:8080/'
},
// plugin options
{
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: false
})
]
};