React Webpack配置报错：需配置合适loader处理文件类型

这个错误的核心原因是你的Webpack规则没有正确匹配到.jsx文件，导致Babel-loader没对JSX语法进行转译。下面是具体的排查和修复步骤：

1. 修正Webpack的test正则表达式 #

你当前的test: /\.js$|jsx/写法存在问题：它只能匹配以.js结尾或者包含jsx字符串的文件，无法正确识别.jsx后缀的文件。正确的写法应该用括号包裹后缀，统一匹配带点的合法后缀：

test: /\.(js|jsx)$/

2. 添加exclude排除node_modules #

为了避免转译第三方依赖（这些依赖一般已完成编译），同时提升构建速度，需要在规则中添加exclude：

exclude: /node_modules/

3. 修正Webpack配置的模块导入方式 #

Webpack配置文件默认运行在Node.js环境，推荐使用CommonJS规范的require而非ES模块的import，避免额外配置开销：
把import path from 'path';改成const path = require('path');

4. 可选：添加resolve.extensions简化导入 #

配置resolve.extensions后，导入文件时可以省略.js或.jsx后缀，提升开发效率：

resolve: {
  extensions: ['.js', '.jsx']
}

修复后的完整webpack.config.js #

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, './src/App.js'),
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'bundle.js',
  },
  devServer: {
    historyApiFallback: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader"
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

5. 确认依赖已正确安装 #

确保你已经安装了所有必要的Babel相关依赖：

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react

完成以上步骤后，重新运行Webpack，JSX语法就能被正常转译，错误应该会消失。

内容的提问来源于stack exchange，提问作者Gino