Webpack因Spread Operator报错无法打包，如何保留代码完成构建？

这个错误的核心原因是：你代码里用的对象扩展运算符属于ES2018+的语法特性，而你的Webpack配置没有配置对应的转译工具，导致Webpack无法识别这个语法。不用删除代码，只要给Webpack加上Babel转译配置就能解决。

下面是具体的解决步骤：

1. 安装必要的Babel依赖包 #

首先在项目根目录运行以下命令，安装Babel相关的开发依赖：

npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/plugin-proposal-object-rest-spread

如果需要兼容更老的浏览器，还需要安装core-js来提供语法polyfill：

npm install core-js@3

2. 修改Webpack配置文件 #

把你原来的module: {...}部分替换成完整的转译规则配置，让Webpack用Babel处理所有JavaScript文件：

var path = require('path')
module.exports = {
  entry: path.resolve(__dirname, 'partner/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配所有.js后缀的文件
        exclude: /node_modules/, // 排除node_modules目录里的文件（不需要转译第三方库）
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              // 配置preset-env，根据目标浏览器自动转译ES6+语法
              ['@babel/preset-env', {
                targets: {
                  browsers: ['> 1%', 'last 2 versions', 'not dead'] // 自定义你的目标浏览器范围
                },
                useBuiltIns: 'usage', // 自动按需引入polyfill
                corejs: 3 // 指定core-js版本
              }]
            ],
            plugins: ['@babel/plugin-proposal-object-rest-spread'] // 专门处理对象扩展/剩余运算符
          }
        }
      }
    ]
  }
}

3. 重新运行Webpack打包 #

配置完成后，重新执行你的Webpack打包命令（比如npx webpack或者你在package.json里定义的build脚本），这个Unexpected token错误就应该消失了。

简单说下原理：babel-loader会把你代码里的ES2018+语法转译成浏览器兼容的ES5代码，@babel/plugin-proposal-object-rest-spread专门负责处理对象的...扩展语法，而@babel/preset-env则帮你自动适配不同浏览器的语法支持情况。

内容的提问来源于stack exchange，提问作者Rasim Avcı