运行webpack-dev-server时遇TypeError：无法读取undefined的'babel'属性

这个错误我之前帮不少开发者排查过，核心原因很明确——你的babel-loader版本和当前使用的Webpack 4.x不兼容。咱们一步步来解决：

1. 升级babel-loader到兼容版本 #

你当前用的babel-loader@6.4.1是为Webpack 3及以下版本设计的，Webpack 4需要babel-loader@7.0.0及以上版本才能正常配合工作。执行以下命令替换：

npm uninstall babel-loader --save-dev
npm install babel-loader@7.1.5 --save-dev

选7.1.5是因为它是稳定兼容Webpack 4和Babel 6的版本，和你现有其他Babel依赖（比如babel-core@6.x）匹配度最高。

2. 统一Babel配置，避免冲突 #

你现在同时在webpack.config.js的babel-loader里写了query配置，又有单独的.babelrc文件，虽然不会直接报错，但容易造成配置混淆。建议保留.babelrc（它是Babel的标准配置方式），删掉webpack里的query部分：

修改webpack.config.js中的rules规则：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader' // 删掉原来的query配置
    }
  ]
}

这样Babel会自动读取.babelrc里的预设和插件，配置逻辑更清晰。

3. 清理依赖缓存（可选但推荐） #

旧的node_modules可能残留一些不兼容的缓存文件，执行以下命令彻底清理后重装：

rm -rf node_modules package-lock.json
npm install

4. 优化启动脚本（可选） #

你的start脚本是webpack-dev-server，可以加上--mode development参数，让Webpack明确运行模式，避免潜在的模式相关警告：
修改package.json的scripts：

"start": "webpack-dev-server --mode development"

做完这些步骤后，再运行npm start应该就能正常启动项目了。另外提一句，你现在用的babel-preset-es2015可以考虑后续换成babel-preset-env，它能根据目标环境自动转译代码，更灵活，但先解决当前报错优先~

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