使用webpack-dev-server遇Module parse failed: Unexpected token错误求助

嘿，太懂这种跟着旧书踩新版本技术坑的憋屈了！我之前学老教程也碰到过一模一样的问题，给你梳理几个大概率能解决问题的核心检查项：

• 先锁死依赖包的版本匹配度
  Webpack 5.x必须搭配babel-loader@8.x+、@babel/core@7.x+这类新版Babel核心包，别再装旧版的babel-preset-react了！先看看你的package.json里的dev依赖是不是这样：

  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.0",
    "webpack": "^5.75.0",
    "webpack-dev-server": "^4.11.1"
  }
  

  要是版本不对，先卸载旧依赖，重新安装对应新版就行。

• 修正Babel配置文件的写法
  新版Babel已经废弃了旧的预设命名，必须用@babel前缀的预设，你的.babelrc（或babel.config.json）得改成这样：

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

  别再写旧版的"presets": ["react"]了，这会直接导致Babel无法识别预设。

• 更新Webpack配置的核心规则
  Webpack 5和dev-server 4的配置和旧版差异很大，重点改这几个地方：

  module.exports = {
    entry: './src/index.jsx', // 你的实际入口文件路径
    output: {
      filename: 'bundle.js',
      path: __dirname + '/dist'
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: 'babel-loader' // 不用再加query参数，直接读取babelrc配置
        }
      ]
    },
    resolve: {
      extensions: ['.js', '.jsx'] // 必须加上.jsx，否则Webpack找不到jsx模块
    },
    devServer: {
      static: './dist', // Webpack 5用static替代旧版的contentBase
      hot: true
    }
  };
  

  尤其注意resolve.extensions一定要包含.jsx，还有dev-server的static配置项，这俩是新版最容易漏改的点。

• 修正npm start的启动命令
  Webpack-dev-server 4的启动命令已经变了，package.json里的scripts得改成：

  "scripts": {
    "start": "webpack serve --mode development"
  }
  

  别再用旧版的webpack-dev-server命令了，新版必须用webpack serve。

如果做完这些还是报错，把ERROR后面的完整错误信息贴出来，能更精准定位问题，但上面这几个点已经覆盖了新版配置里90%的常见坑，先排查一遍应该能解决你的编译问题。

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