React+Webpack+Babel打包报错：Module parse failed: Unexpected token '<'

问题根因 #

你遇到的JSX语法无法识别的问题由两个核心配置错误导致：

1. npm run dev命令强行指定了entry和output-path参数，导致webpack完全忽略了你编写的webpack.config.js配置文件，你写的babel-loader规则从始至终没有生效
2. 就算配置文件被加载，你在JS/JSX的loader规则里错误加入了仅能处理CSS的style-loader，会阻断babel-loader的执行

解决步骤 #

1. 修正package.json的scripts配置

删除命令行中多余的entry、output参数，避免覆盖配置文件内容，修改后如下：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

如果要显式指定配置文件确保加载，可以改成：

"dev": "webpack --mode development --config webpack.config.js"

2. 修正webpack.config.js的JS/JSX处理规则

删除错误的style-loader，调整后的规则如下：

{
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: ['babel-loader']
}

如果需要保留eslint检查，请先确保安装了eslint-loader，且调整loader顺序（loader从右往左执行）：

{
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: ['babel-loader', 'eslint-loader']
}

你已经配置了.babelrc，可以直接删除webpack配置里的query字段，避免配置冲突。

3. 重新运行项目

清理缓存后重新执行命令：

# 可选：清理旧依赖
rm -rf node_modules package-lock.json
npm install
# 运行项目
npm run dev

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