Webpack 配置 Babel 的核心是用 babel-loader 接管 JS 文件，配合 @babel/preset-env 按 browserslist 智能降级语法并按需注入 core-js@3 polyfill；需安装 @babel/core、babel-loader、@babel/preset-env，配置 rule 排除 node_modules，并在 .babelrc 中设置 useBuiltIns: "usage"。
Webpack 配置 Babel 转换低版本语法，核心是让 babel-loader 接管 JS 文件，用 @babel/preset-env 按目标环境自动降级语法，并按需注入 polyfill —— 不是简单“全量转 ES5”，而是精准、轻量、可配置的兼容方案。
安装必要依赖
只需三类基础包，无需旧版 preset（如 es2015）或已废弃的 babel-polyfill：
-
@babel/core：Babel 编译引擎 -
babel-loader：Webpack 与 Babel 的桥梁 -
@babel/preset-env：智能预设，根据 browserslist 决定转什么、补什么
执行命令：
npm install -D @babel/core babel-loader @babel/preset-env配置 babel-loader 规则
在 webpack.config.js 的 module.rules 中添加：
- 匹配
.js和可选的.mjs文件（/\.m?js$/） - 排除
node_modules，避免重复编译和性能损耗 - 不写
options，把具体转译逻辑交给.babelrc或babel.config.js
示例片段：
rules: [{
test: /\.m?js$/,
exclude: /node_modules/,
use: 'babel-loader'
}]
}
设置 Babel 预设与目标环境
在项目根目录新建 .babelrc（或 babel.config.js），内容聚焦两件事：
- 用
@babel/preset-env处理语法降级 - 通过
browserslist字段声明支持范围（推荐写在package.json中）
.babelrc 示例：
"presets": [
["@babel/preset-env", {
"useBuiltIns": "usage",
"corejs": 3
}]
]
}
同时，在 package.json 中声明目标浏览器（例如支持 Chrome 71+、Firefox 65+、Safari 12+、Edge 79+）：
处理缺失 API（polyfill）
语法转换（如箭头函数 → function）由 preset-env 自动完成；但新增全局对象或实例方法（如 Array.prototype.flat、Promise.allSettled）需要运行时垫片：
-
useBuiltIns: "usage"表示只引入你代码中实际用到的新 API 的 polyfill - 必须安装
core-js@3：npm install --save core-js@3 - 不需要手动
import 'core-js/stable'——useBuiltIns: "usage"会自动注入 - 若需生成器（
async/await）支持，加上"regenerator": true（preset-env 默认已包含）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
