Unimportable Images

I have a strange issue where images are not loading in a non-create-react-app (an app built using required dependencies only).

When I try this in a create-react-app (an app created using create-react-app) the images loads fine.

I can only conclude that I must be missing something in my config, missing dependcies, am referencing the files incorrectly or something similar. Nothing I have tried so far has worked!

I would like to work this out, to continue using the non-create-react-app in order to better understand react.

CSS

I have referenced an image in a .css file.

./Home/Home.css

.bg-image {
    width: 100vw;
    height: 100vh;
    color: green;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    border:green solid 20px;
    background-image: url('../../static/img/test.jpg')
}

this .css file is being imported into the relevant component

JS

./Home/index.js

import React from "react";
import './Home.css'

const Home = () => {
    return (
        <>
            <div className='main-container'>
                <div className="bg-image">
                    <h1>Welcome to Home!</h1>
                    <div className='logo'></div>
                </div>
            </div>
        </>
    );
};

export default Home;

package.json

{
  "name": "portfolio",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
    }
  },
  "scripts": {
    "dev": "webpack serve --mode development --config config/webpack.config.dev.js",
    "build": "webpack --config config/webpack.config.production.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/xargon666/portfolio.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/xargon666/portfolio/issues"
  },
  "homepage": "https://github.com/xargon666/portfolio#readme",
  "devDependencies": {
    "@babel/core": "^7.18.5",
    "@babel/plugin-proposal-class-properties": "^7.17.12",
    "@babel/plugin-transform-runtime": "^7.18.5",
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.17.12",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^14.2.1",
    "babel-jest": "^28.1.1",
    "babel-loader": "^8.2.5",
    "bootstrap": "^5.1.3",
    "css-loader": "^6.7.1",
    "css-minimizer-webpack-plugin": "^4.0.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "jest": "^28.1.1",
    "jest-environment-jsdom": "^28.1.1",
    "react-bootstrap": "^2.4.0",
    "react-router-dom": "^6.3.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.2"
  },
  "dependencies": {
    "axios": "^0.27.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

Webpack

Main Config

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

const ROOT_DIRECTORY = path.join(__dirname, '../'); // the root of your project
const PUBLIC_DIRECTORY = path.join(ROOT_DIRECTORY, 'public'); // the root of the frontend, i.e. html file

const config = {
  entry: [path.resolve(ROOT_DIRECTORY, 'src/index.js')], // the main JavaScript file of the project
  output: {
    // instructions for compiling the code
    path: path.resolve(ROOT_DIRECTORY, 'build'), // the file where the compiled code should go
    filename: 'bundle.js', // the file name of the compiled code
    publicPath: '/', // specifies the base path for all the assets within your application.
  },
  mode: 'development', // tells webpack to use its built-in optimizations according to the mode
  resolve: {
    // instructions on how to resolve modules
    modules: [path.resolve('node_modules'), 'node_modules'], // tells webpack where to look for node_modules
  },
  performance: {
    // notifies you if assets and entry points exceed a specific file limit
    hints: false,
  },
  plugins: [
    // plugins we are using to help with compiling
    new HtmlWebpackPlugin({
      // used to add the JavaScript code to the HTML
      template: path.join(PUBLIC_DIRECTORY, 'index.html'),
      favicon: "./src/static/img/favicon.ico"
    }),
  ],
  module: {
    // helpers we want webpack to use
    rules: [
      {
        test: /\.(js|jsx)$/,
        resolve: {
          extensions: [".js", ".jsx"]
        },
        exclude: /nodeModules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      }, // transpile css files
      {
        test: /\.(png|svg|jpe?g|gif|pdf)$/i,
        use: ['file-loader'],
      }, // transpile image files
    ],
  },
};

module.exports = config;

Dev Config

const config = require('./webpack.config.js');

config.devServer = {
  historyApiFallback: true, //serve a previous page on a 404 error
  static: ["./public"],
  port: 8080, // use this port for the server
  hot: true, // refresh the browser when changes are saved
  open: true, // open the project in the browser when the server starts
};

config.devtool = 'inline-source-map'; // a tool to find errors in the compiled code, but show them against the source code for easier debugging

module.exports = config;

File Structure