Webpack启动React项目失败：模块解析错误求助

从你的报错信息和配置文件来看，核心问题是Babel版本冲突 + 预设配置不匹配，导致babel-loader无法正确编译JSX语法。下面一步步帮你修复：

1. 清理冲突的Babel依赖 #

你的package.json里同时安装了Babel 6.x和7.x的包，这会导致加载器逻辑混乱。先卸载旧的6.x依赖：

npm uninstall babel-core babel-preset-env babel-preset-es2015 babel-preset-react babel-polyfill

然后保留并更新为7.x的规范依赖，修改后的devDependencies应该是这样：

"devDependencies": {
  "@babel/core": "^7.11.4",
  "@babel/preset-env": "^7.11.0",
  "@babel/preset-react": "^7.10.4",
  "babel-loader": "^8.1.0",
  "@babel/polyfill": "^7.12.1",
  "html-webpack-plugin": "^4.3.0",
  "webpack": "^4.44.1",
  "webpack-cli": "^3.3.12",
  "webpack-dev-server": "^3.11.0"
}

注：旧版babel-polyfill在Babel 7.4.0后已被弃用，替换为@babel/polyfill更符合7.x规范。

2. 修正Babel配置文件（.babelrc） #

Babel 7.x要求预设必须指定完整的包名，不能再用旧版的简写名称，修改.babelrc为：

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

3. 调整Webpack配置细节 #

• Entry路径校验：如果webpack.common.js在项目根目录的config文件夹中，../src/index.js是正确的；如果它直接在根目录，需要改成./src/index.js。
• HtmlWebpackPlugin模板路径：你当前指定的dist/index.html是输出目录，首次打包时该文件还不存在，建议把模板放在src目录下，修改为：

new HtmlWebpackPlugin({
  template: path.resolve(__dirname, '../src/index.html') // 根据你的实际目录结构调整
})

4. 更新启动脚本 #

确保webpack-dev-server能正确读取配置文件，修改package.json的scripts：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack-dev-server --config webpack.dev.js",
  "build": "webpack --config webpack.dev.js"
}

若配置文件在config文件夹中，需改为--config config/webpack.dev.js。

5. 重新安装依赖并启动 #

执行以下命令重置依赖并启动服务：

rm -rf node_modules package-lock.json
npm install
npm start

这样就能解决JSX编译失败的问题，成功启动本地开发服务了。

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