从零搭建React项目时webpack.config.js报错webpack CLI failed to load

你提供的webpack.config.js语法无错误，webpack CLI failed to load报错通常由依赖、运行环境或命令调用问题导致，具体排查和解决方法如下：

1. 依赖缺失或版本不兼容 #

webpack 4及以上版本要求单独安装webpack-cli才能使用命令行功能，若未安装、webpack与webpack-cli版本不匹配，或者配置中用到的loader、plugin未安装，都会导致配置加载失败。
你当前配置中使用的babel-loader style-loader css-loader html-webpack-plugin以及配套的babel核心依赖@babel/core @babel/preset-react @babel/preset-env缺装任意一个，都会在配置加载阶段抛出异常，触发该报错。

2. 依赖缓存损坏 #

node_modules文件夹或包管理工具的缓存损坏，导致已安装的依赖无法正常调用。

3. 命令调用错误 #

未按照当前项目的依赖安装方式调用正确的webpack执行命令，比如局部安装了webpack却直接调用全局webpack命令，版本不一致导致加载失败。

4. Node.js版本过低 #

当前安装的webpack版本有最低Node.js运行版本要求，比如webpack 5要求Node.js版本 >= 10.13.0，版本低于要求会导致依赖无法正常初始化。

• 先卸载可能存在的旧版本依赖，避免版本冲突：

npm uninstall webpack webpack-cli babel-loader @babel/core @babel/preset-react @babel/preset-env style-loader css-loader html-webpack-plugin

• 安装适配的稳定版本依赖：

npm install webpack@5 webpack-cli@4 babel-loader @babel/core @babel/preset-react @babel/preset-env style-loader css-loader html-webpack-plugin --save-dev

• 检查项目根目录是否存在.babelrc配置文件，没有则新增该文件，写入以下内容保证React语法可以被正常解析：

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

• 清理损坏的依赖缓存，重新安装全量依赖：

rm -rf node_modules package-lock.json
npm install

• 在package.json的scripts字段添加本地webpack调用命令，避免全局和局部版本冲突：

{
  "scripts": {
    "start": "webpack serve --open",
    "build": "webpack"
  }
}

后续执行开发服务启动、打包操作统一用npm start、npm run build即可，无需直接调用全局webpack命令。

• 若上述操作完成后仍报错，升级Node.js到14.x及以上的长期支持版本即可。

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