问题根源分析 #

你的问题出在两个核心点上：

• Webpack配置混用了旧版的loaders字段和新版的rules字段（Webpack 2及以上版本已废弃loaders，统一使用rules），导致你写的JSX解析规则根本没生效
• 你的index.js文件后缀是.js但包含JSX语法，却没让babel-loader同时处理.js和.jsx文件

之前你把test规则改成/\.jsx$/后，反而漏掉了对.js后缀的index.js的处理，所以才会出现新的解析失败错误。

分步解决方案 #

1. 修正Webpack配置文件

删掉旧的loaders字段，把JS/JSX的解析规则合并到rules里，让babel-loader同时匹配.js和.jsx文件。修改后的完整配置如下：

const path = require('path'), 
      webpack = require("webpack"), 
      clientPath = path.join(__dirname, 'client'), 
      HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.join(clientPath, 'index.js'),
  output: { 
    path: __dirname, 
    filename: 'bundle.js' 
  },
  module: {
    rules: [
      // 同时处理.js和.jsx文件，排除node_modules避免冗余编译
      { 
        use: 'babel-loader', 
        test: /\.(js|jsx)$/, 
        exclude: /node_modules/ 
      },
      { use: ['style-loader', 'css-loader'], test: /\.css$/ },
      { 
        test: /\.(jpe?g|png|gif|svg)$/i, 
        use: [
          'file-loader?hash=sha512&digest=hex&name=[hash].[ext]', 
          'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ] 
      },
      { test: /\.(eot|svg|ttf|woff|woff2)$/, use: 'file-loader' }
    ]
  },
  plugins: [ 
    new HtmlWebpackPlugin({ template: 'client/index.html' }) 
  ]
};

2. 配置Babel解析JSX（关键步骤）

你需要安装Babel的React预设，让Babel能识别并转译JSX语法：
首先安装依赖包：

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

然后在项目根目录创建.babelrc配置文件，内容如下：

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

3. 验证并重新构建

现在运行你的Webpack构建命令，应该就能正常解析JSX语法，顺利完成打包了。

额外补充说明 #

• Webpack 2+版本完全使用module.rules配置加载器，旧的loaders字段会被直接忽略，这也是你之前的JSX规则没生效的核心原因
• 即使JS文件后缀是.js，只要包含JSX语法，就需要让babel-loader处理它，所以test规则必须同时覆盖.js和.jsx
• @babel/preset-react是解析JSX的必要预设，没有它Babel无法识别JSX语法

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