This experience really is what makes me detest webpack. While running my app with the webpack-dev-server, everything works fine, and all my assets and svgs are loaded properly, it's all good indeed. However, when I build my React app for production, all my assets return this error

Failed to load resource: the server responded with a status of 404 (Not Found)

Basically, my assets (svgs, images etc) aren't being loaded after production build, even though everything was perfectly fine during development.

below is my webpack config, can anyone please tell me what I'm doing wrong? And if anyone has experienced this, what do you think was the issue?

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

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/bundle.js",
    publicPath: "/"
  },
  devServer: {
    contentBase: "./src",
    port: 3030
  },
  resolve: {
    extensions: ["*", ".js", ".jsx"]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./src/index.html"
    })
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "sass-loader"
          }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"]
      },
      {
        test: /\.(html)$/,
        use: {
          loader: "html-loader",
          options: {
            attrs: [":data-src", "img:src", "link:href", "use:xlink:href"]
          }
        }
      }
    ]
  }
};

This is my current file structure. The srcfolder and the webpack.config file are in the same directory. The imgfolder, the App.jsx file and the index.js are in the same directory. I'm referencing the image from the App.jsx file

root
  --srcfolder
      --imgfolder
          --sprite.svg
      --App.jsx
        <svg className="app__name--svg" id="app__name--svg">
          <use xlinkHref="./img/sprite.svg#icon-react" />
        </svg>
     --index.js
 --webpack.config.js