将Webpack中Babel Loader配置迁移至.babelrc后失效求助

问题描述 #

原本运行正常的Webpack Loader配置，将其中的Babel选项迁移到根目录的.babelrc文件后，代码无法转译且抛出找不到加载器的错误。移除插件后别名失效，说明程序能检测到.babelrc，当前使用Webpack 4和babel-loader 8。

原Webpack配置 #

test: /\.js$/,
use: {
  loader: 'babel-loader',
  options: {
    presets: [
      ['@babel/preset-env', {
        'corejs': '3.35',
        'useBuiltIns': 'entry'
      }]
    ],
    plugins: [
      ['babel-plugin-module-resolver', {
        'alias': {
          '~': './src'
        }
      }],
      '@babel/plugin-proposal-function-bind'
    ],
    comments: false
  }
},
exclude: {
  and: [/node_modules/],
  not: [
    /ol/,
  ]
}

无效的.babelrc配置 #

"presets": [
    ["@babel/preset-env", {
      "corejs": "3.35",
      "useBuiltIns": "entry"
    }]
  ],
  "plugins": [
    ["babel-plugin-module-resolver", {
      "alias": {
        "~": "./src"
      }
    }],
    "@babel/plugin-proposal-function-bind"
  ],
  "comments": false
}

解决方案 #

1. 修复.babelrc的JSON语法错误 #

你提供的.babelrc开头缺少左大括号{，JSON格式要求必须以{开头、}结尾。修正后的.babelrc应为：

{
  "presets": [
    ["@babel/preset-env", {
      "corejs": "3.35",
      "useBuiltIns": "entry"
    }]
  ],
  "plugins": [
    ["babel-plugin-module-resolver", {
      "alias": {
        "~": "./src"
      }
    }],
    "@babel/plugin-proposal-function-bind"
  ],
  "comments": false
}

2. 确保依赖包版本兼容且已安装 #

• babel-loader 8.x 需要搭配@babel/core@7.x，未安装则执行：

  npm install @babel/core --save-dev
  

• 已配置babel-plugin-module-resolver，确保该包已安装：

  npm install babel-plugin-module-resolver --save-dev
  

• 配置中指定了corejs: 3.35，需安装对应版本的core-js：

  npm install core-js@3.35 --save
  

3. 调整Webpack配置 #

迁移Babel选项到.babelrc后，Webpack中只需保留babel-loader的基础配置，移除options部分，同时保留原有的exclude规则（这是Webpack专属规则，不能迁移到Babel配置文件）：

test: /\.js$/,
use: 'babel-loader',
exclude: {
  and: [/node_modules/],
  not: [/ol/]
}

4. 验证配置生效 #

执行Webpack构建命令，检查是否还有加载器错误。若别名仍有问题，可尝试将.babelrc中的别名路径改为"src"（相对根目录的简写形式），避免路径解析歧义。

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