模块解析失败 - Webpack React JS

Question

最近2天我在尝试解决webpack配置，但是我无法解决问题。我遵循了 package.json 文件中的配置。另外，我尝试过手动降级依赖项，但最终只遇到了更多问题。

Dependencies
"react": "^16.13.1",
"os-browserify": "^0.3.0",
"path-browserify": "^1.0.1",


Dev Dependencies
"@babel/core": "^7.21.0",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"

我的 webpack.config.js 文件

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

module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.js'),
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.s(a|c)ss$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            // options: {
            //   modules: true,
            //   url: true,
            // },
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-url-loader',
            options: {
              limit: 10000,
            },
          },
        ],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', { targets: 'defaults' }]],
          },
        },
      },
      // {
      //   test: /\.js$/,
      //   exclude: /node_modules/,
      //   use: {
      //     loader: 'babel-loader',
      //     options: { presets: ['react', 'es2015', 'stage-1'] },
      //   },
      // },
      // {
      //   test: /\.css$/,
      //   use: {
      //     options: 'style-loader!css-loader',
      //   },
      // },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx', '.css'],
    alias: {
      path: require.resolve('path-browserify'),
    },
    modules: ['node_modules'],
    fallback: {
      os: require.resolve('os-browserify/browser'),
      fs: false,
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public', 'index.html'),
      favicon: path.resolve(__dirname, 'public', 'favicon.ico'),
    }),
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    port: 3000,
  },
};

我还配置了 .babelrc 文件。

    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

经过反复试验，我最终遇到了以下错误。

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
|  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)

Module not found: Error: Can't resolve './fonts/slick.ttf'
Module not found: Error: Can't resolve './fonts/slick.eot'
Module not found: Error: Can't resolve './ajax-loader.gif
Module not found: Error: Can't resolve 'module' in '~/node_modules/resolve-from'

ERROR in ./node_modules/rc-input-number/assets/index.css 1:0
Module parse failed: Unexpected token (1:0)

ERROR in ./node_modules/react-bootstrap-table-next/dist/react-bootstrap-table2.min.css 1:0
Module parse failed: Unexpected token (1:0)

ERROR in ./node_modules/react-input-range/lib/css/index.css 1:0
Module parse failed: Unexpected token (1:0)

ERROR in ./node_modules/react-datepicker/dist/react-datepicker.css 1:0
Module parse failed: Unexpected token (1:0)

ERROR in ./node_modules/slick-carousel/slick/slick.css 2:0
Module parse failed: Unexpected token (2:0)