已安装babel-loader但Webpack无法识别该加载器的问题咨询

• 首先卸载冲突的旧版本依赖：你当前项目里混装了Babel 6时代的预设包，和已安装的Babel 7版本依赖树冲突，是导致loader加载失败的核心原因，同时卸载误装的无效依赖：

npm uninstall babel-preset-es2015 babel-preset-react install npm --save-dev

• 修正webpack.config.js的模块规则，新增exclude字段跳过node_modules目录的编译，避免编译第三方依赖时抛出异常被误判为loader未识别，修改后的规则配置如下：

const path = require('path')

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/, // 新增跳过第三方依赖目录的配置
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-react'],
        },
      },
    ],
  },
}

module.exports = config

• 清理损坏的依赖缓存和锁文件后重新安装依赖：

# 删除现有依赖目录和锁文件
rm -rf node_modules package-lock.json
# 重新执行安装
npm install

• 构建时优先调用项目本地安装的webpack包，避免全局安装的版本冲突：

npx webpack --mode=development

补充说明：你当前安装的babel-loader@8.2.5和webpack@5.73.0版本完全兼容，不需要额外调整版本号，只要解决依赖冲突和配置遗漏问题即可正常运行。

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