I am currently using Webpack version 5, Webpack-dev-server version 4, and Salesforce Lightning React Component. The webpack-dev-server can load the static icons successfully, but the webpack one cannot load.

Here is the image with webpack-dev-server version 4: Webpack-dev-server

Here is the image with webpack version 5: Webpack

Here is the snapshot of my code using Salesforce React Lightning: Salesforce React Lightning Component

Here is the folder structure of my project, and the location of my icon files: Project Folder Structure

In Salesforce React Component, they have the IconSettings with iconPath prop which you specify the location of the files, and an array which contain the "name" of the file, and the "category" of the file or the the name of the folder.

Here is my package.json script:

  "scripts": {
"start": "webpack serve",
"build": "webpack",
"test": "react-scripts test",
"eject": "react-scripts eject"}

Here is my webpack.config.js:

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

module.exports = {
    entry: "./src/index.tsx",
    output: { path: path.join(__dirname, "build"), filename: "index.bundle.js" },
    mode: process.env.NODE_ENV || "development",
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
    devServer: { static: [path.join(__dirname, "src"), path.join(__dirname, "public")], historyApiFallback: true },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ["babel-loader"],
            },
            {
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                use: ["ts-loader"],
            },
            {
                test: /\.(css|scss)$/,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.(jpg|jpeg|png|gif|mp3|mp4|ico|svg)$/,
                type: "asset/resource"
            }
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "public", "index.html"),
        }),
    ],
};

Here is my .babelrc file:

{
    "presets": [
        "@babel/env",
        "@babel/react",
        "@babel/preset-typescript",
        "@salesforce/babel-preset-design-system-react"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-object-rest-spread"
    ]
}