Pfthb

I'm fairly new to Webpack so I hope this question is understandable, I've tried to format it to be easy to read.

I'm using webpack to build my react app and I have finally figured out how to output my image folder structure and have hit another road block.

I hope you can help me.

Outputted dist folder structure below:

I'm not sure why but in development I have to reference background-image url paths in a specific way. Issue is after running webpack, my outputted distribution build doesn't seem to like that the image file paths aren't relative.

In development my css is set as so:
background: url('/img/site/placeholder.jpg');

The build works fine in development but in production the image file is not found:
GET file:///img/site/placeholder.jpg net::ERR_FILE_NOT_FOUND

I can update the minified bundle.js so the css uses relative paths like so:
background: url('./img/site/placeholder.jpg');

This works only in production and not in development.

If I run webpack to output my React build for distribution with the relative path(./img/) in the css, I get this error:
ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./scss/styles.scss
Module not found: Error: Can't resolve './img/site/placeholder.jpg' in '/Users/moehammo/Documents/_Moe/00_MHC/conceptual_website_react/scss'
@ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./scss/styles.scss 6:6248-6285
@ ./scss/styles.scss
@ ./index.js

I've tried using publicPath: "./" in my webpack.config.js file but it throws my build out and I think I might be implementing it incorrectly. What am I missing in this conundrum?

My webpack.config.js file below:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const sass = require('node-sass');
const path = require('path');

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin(
 template: './index.html',
 filename: 'index.html',
 inject: 'body'
)

module.exports = 
 entry: './index.js',
 output: 
 path: path.resolve(__dirname, "dist"),
 filename: 'bundle.js'
 ,
 module: 
 rules: [
 
 test:/.js$/,
 exclude: /(node_modules)/,
 use: 
 loader: 'babel-loader',
 options: 
 presets:['env','react']
 
 
 ,
 
 test: /.scss$/,
 use: [
 loader: "style-loader"
 , 
 loader: "css-loader"
 , 
 loader: "sass-loader"
 ]
 ,
 
 test: /.(png
 ],
 loaders: [
 test: /.json$/, loader: 'json' 
 // other loaders
 ]
 ,
 plugins: [HtmlWebpackPluginConfig]

I appreciate any help.

Thank you

One possibility would be using url-loader which is going to convert the file into a base64 string which will be applied directly into your image file when needed.

// regular js file
import img from './image.png'
console.log(img);

// webpack.config.js
module.exports = 
 module: 
 rules: [
 gif)$/i,
 use: [
 
 loader: 'url-loader',
 options: 
 limit: 8192
 
 
 ]
 
 ]
 

If you want to continue with file-loader try working with the outputPath property on the loader config in order to match the location of the production build folder. It's likely your production app is trying to access a file that doesn't exist in your "dist" folder.

 loader: 'file-loader',
 options: 
 name: '[path][name].[ext]',
 outputPath: 'images/'