I'm new to WebPack, and it's hard to debug it and I can't seem to find any right answer on google.

I'm trying to use react router, but it seems like it needs a lot of configuration to make it work exactly like create-react-app's.

React router sub-routes seems to work only when you redirect it with the Link component, example:

// App.jsx
<Route path="/profile/me/" element={<PrivateRoute component={Profile} />}>
  <Route path="create" element={<PrivateRoute component={CreateProfile} />} />
</Route>;

// Sub-Component - Profile.jsx
<Link to="create">
    <Button color="primary" variant="contained">
        Set It Up
    </Button>
</Link>;

But when I try to enter the URL in the browser search bar, I get an error:

GET 
http://localhost:3000/profile/dist/bundle.js [HTTP/1.1 404 Not Found 4ms]
The resource from “http://localhost:3000/profile/dist/bundle.js” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).  
create

Here's my Webpack config:

const path = require("path");
const webpack = require("webpack");
const Dotenv = require('dotenv-webpack');

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/env"],
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.js$/,
        include: /node_modules\/react-dom/,
        use: ["react-hot-loader/webpack"],
      },
    ],
  },
  resolve: {
    extensions: ["*", ".js", ".jsx"],
  },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    publicPath: "/profile/dist/",
    filename: "bundle.js",
  },
  devServer: {
    // contentBase
    static: {
      directory: path.join(__dirname, "public/"),
    },
    port: 3000,
    // publicPath
    devMiddleware: {
      publicPath: "https://localhost:3000/dist/",
    },
    // hotOnly
    hot: "only",

    // To use router
    historyApiFallback: true,

    // Proxy
    /*proxy: {
      "/api/v1": "http://localhost:8000",
    },*/
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new Dotenv({
      systemvars: true,
    }),
  ],
};