unable to load background image on body using webpack 4 in reactjs - reactjs

Question

in my react js app I want to add the background image on the body.it is working fine when I'm doing in development mode but when comes to production it is not working.
for production, I'm using dist separate folder may it is creating some path issue.
here my scss
body {
font-family: Helvetica,Arial,sans-serif;
font-size: $m-size;
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-image: url(/images/bg4.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top;
background-size:cover;
}
my webpack.config
module.exports = {
entry:{
vendor: VENDOR_LIBS,
main: './src/app.js',
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
publicPath: '/',
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{ test: /\.bundle\.js$/, use: { loader: 'bundle-loader', options: {lazy: true} } },
{
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader?url=false',
options: {
sourceMap: true,
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},{
test: /\.(gif|svg|jpg|png|ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader: "file-loader?name=[name].[ext]",
}
]
},
plugins: [
new CleanWebpackPlugin('dist', {} ),
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css',
}),
new HtmlWebpackPlugin({
inject: true,
hash: true,
template: './src/index.html',
filename: 'index.html',
favicon: './public/images/fav.ico'
}),
new WebpackMd5Hash(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
],
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all',
minChunks: 2
},
}
},
runtimeChunk: true,
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true,
uglifyOptions: {
compress: {
inline: false
}
}
}),
new OptimizeCSSAssetsPlugin({})
],
},
};
webpack generating other images into base64 but not for this image.and it is not available in dist folder.
can any one help me out, i searched lot of questions but couldn't solve.
i don't want any external link to load image.

Answer 1

In production your current directory will change to /dist/index.html so thats why the path you used for development /images/bg4.png can't find the file.
The solution is to copy your static image files, like your background, into the /dist folder in the build process.
Assuming your project directory is similar to the following:
...
/images/bg4.png
package.json
Then add these commands to your webpack build script to copy the images into your production directory /dist.
// in package.json
"scripts": {
...
"build": "...your webpack build commands... && cp -a images\\. dist\\images",
...
},
Your new file directories will look like
/dist/...your index.html, bundles, etc...
/images/bg4.png
/images/bg4.png
package.json
and your image path should find the image file now.