Webpack v5迁移构建报错：模块解析失败（Unexpected token）

问题根源 #

报错指向JSX语法（<HashRouter>/<Application>）无法被解析，说明你的babel-loader没有正确处理包含JSX的.js文件，大概率是配置细节出错导致Webpack未触发转译规则。

修复步骤 #

1. 修正exclude规则的写法 #

你的配置里exclude: '/node_modules/'是字符串格式，但Webpack需要正则表达式才能正确匹配目录路径，字符串会被当作精确路径匹配，可能导致规则失效。修改为：

exclude: /node_modules/

2. 确保Babel核心依赖已安装 #

Webpack 5对Babel版本有明确要求，确认已安装以下必备依赖：

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

3. 扩展test规则覆盖JSX文件（可选但推荐） #

虽然当前文件是.js后缀，建议将test规则改为同时匹配.js和.jsx，避免后续新增JSX文件再次踩坑：

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

4. 验证Webpack配置的规则引入 #

检查webpack.build.js中是否正确合并了common.js返回的规则，确保module.rules数组包含你的babel-loader规则，示例：

const common = require('./common');
module.exports = {
  // ...其他配置项
  module: {
    rules: [...common.getRules(config), /* 其他资源规则 */]
  }
}

5. 清除Webpack缓存 #

Webpack 5默认开启持久化缓存，旧缓存可能导致新配置不生效，执行构建时添加--no-cache参数：

node --trace-deprecation node_modules/webpack/bin/webpack.js --no-cache

额外排查方向 #

如果修复后仍有问题，可以检查：

• src/index.js是否在Webpack的入口文件范围内
• 项目根目录是否存在.babelrc/babel.config.json，是否与loader配置的presets/plugins产生冲突

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