Webpack通过babel-loader实现ES6+语法降级，需安装babel-loader、@babel/core、@babel/preset-env，配置rules排除node_modules，并通过browserslist或targets指定IE11等目标环境，配合useBuiltIns: 'usage'和@babel/plugin-transform-runtime处理polyfill与辅助函数。
Webpack本身不直接处理语法降级，但通过 babel-loader 可以把 ES6+ 代码转成 ES5，让老浏览器（比如 IE11）也能运行。关键在于正确安装依赖、配置 loader，并指定目标环境。
安装必需的 Babel 工具链
需要三个核心包：
- babel-loader：作为 webpack 和 babel 之间的桥梁；
- @babel/core：Babel 的核心编译引擎；
- @babel/preset-env：智能决定哪些语法要转、哪些不用转，依据你设定的目标浏览器。
执行命令安装（推荐最新稳定版）：
npm install -D babel-loader @babel/core @babel/preset-env在 webpack.config.js 中启用 babel-loader
在 module.rules 里添加 JS 文件的处理规则，注意排除 node_modules：
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
这样 webpack 打包时就会对所有匹配的 .js 文件调用 Babel 进行转译。
指定目标浏览器，避免过度转译
光有 preset-env 不够，它默认按最保守方式降级。建议在 package.json 中声明目标环境：
"browserslist": ["ie 11", "last 2 versions", "> 1%"]
或者直接在 preset 配置里写：
presets: [
['@babel/preset-env', {
targets: { ie: '11' },
useBuiltIns: 'usage',
corejs: 3
}]
]
其中 useBuiltIns: 'usage' 表示只引入实际用到的 polyfill，减小体积。
处理 async/await 等需要运行时支持的特性
如果代码用了 async、await，打包后可能报 regeneratorRuntime is not defined 错误。这时需补充：
- 安装：npm install -D @babel/plugin-transform-runtime 和 npm install @babel/runtime；
- 在 babel-loader 的 options 中加入插件：
plugins: ['@babel/plugin-transform-runtime']
这个插件会自动引入 @babel/runtime 中的辅助函数，避免重复注入，提升代码复用性。
