Webpack解析失败：可选链操作符触发Unexpected token错误求助

以下是针对性的排查和解决步骤：

1. 确认Babel插件与预设配置 #

• 安装@babel/plugin-proposal-optional-chaining插件：

  npm install @babel/plugin-proposal-optional-chaining --save-dev
  

• 在babel配置文件（babel.config.js或.babelrc）中明确启用插件，或确保@babel/preset-env的targets配置足够覆盖ES2020特性：

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": { "chrome": "80", "ie": "11" }, // 根据实际需求调整目标环境
        "useBuiltIns": "usage",
        "corejs": 3
      }],
      "@babel/preset-react"
    ],
    "plugins": ["@babel/plugin-proposal-optional-chaining"]
  }
  

2. 检查Webpack的loader配置 #

• 确保Webpack对JS/JSX文件使用babel-loader处理，且未错误排除需要编译的文件：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/, // 仅排除第三方依赖，自己的代码必须被处理
          use: {
            loader: 'babel-loader'
          }
        }
      ]
    }
  };
  

3. 验证依赖版本兼容性 #

• 检查@babel/core、babel-loader、@babel/preset-env的版本是否匹配：

  npm list @babel/core babel-loader @babel/preset-env
  

  babel-loader 8.x必须搭配@babel/core 7.x，若版本不兼容，升级或降级到对应适配版本。

4. 排查其他工具的干扰 #

• 若使用ESLint，需配置babel-eslint作为解析器以支持可选链：

  // .eslintrc
  {
    "parser": "babel-eslint"
  }
  

• 若为TypeScript项目，确保tsconfig.json中target设为ES2020或更高，或启用strict模式。

5. 清理缓存 #

• 删除Webpack缓存目录：

  rm -rf node_modules/.cache/webpack
  

• 启动Webpack时添加--no-cache参数避免使用缓存：

  webpack serve --no-cache
  

6. 检查代码语法 #

• 确认报错行的可选链写法无语法错误（如book?..cover_img这类笔误）。

7. 最小化复现定位问题 #

• 创建一个极简React项目，仅编写包含可选链的测试代码，逐步添加原有项目的配置和依赖，定位导致解析失败的具体因素。

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