ES2024 新 API 在 webpack5 中如何配置 polyfill？

Webpack 5 本身不提供 ES2024 API 的 polyfill 配置，需通过 babel-loader 配合 @babel/preset-env 和 core-js 实现。适用于需要兼容旧浏览器的前端项目，风险在于部分 ES2024 特性在 core-js 中可能尚未稳定支持。

先说结论：Webpack 5 仅负责模块打包，JavaScript 新特性 polyfill 需交由 Babel 工具链处理。

适合：需要在旧浏览器使用新 JavaScript API 的前端工程。
先准备：安装 babel-loader、@babel/preset-env 和 core-js 依赖。
验收：构建后检查产物是否包含 polyfill 代码且浏览器控制台无报错。

命令速用版

在项目根目录执行以下命令安装必要依赖。

npm install `--save-dev` babel-loader @babel/core @babel/preset-env core-js

为什么会这样

Webpack 5 移除了自动 Node.js 核心模块 polyfill，且从未负责 JavaScript 语言特性的 polyfill。

JavaScript 新 API 的兼容性处理属于转译范畴，标准做法是使用 Babel 将代码转换为目标环境支持的版本。Webpack 5 的设计哲学是专注模块 bundling，因此配置 polyfill 必须引入 babel-loader 并在 babel 配置中指定 targets 和 useBuiltIns。

分步处理

第一步：创建 babel 配置文件。

在项目根目录创建 babel.config.js，设置 preset-env 的 useBuiltIns 为 usage 或 entry。

module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: { browsers: ['> 1%', 'last 2 versions'] },
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ]
};

第二步：配置 Webpack 规则。

在 webpack.config.js 的 module.rules 中添加 babel-loader 处理 js 文件。

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }
  ]
}

第三步：确认 core-js 版本。

确保 package.json 中 core-js 版本为 3.x，部分 ES2024 特性依赖最新版本的 core-js 实现。

怎么验证是否生效

构建完成后，检查 dist 目录下的 bundle 文件是否包含 core-js 相关代码片段。

在目标旧浏览器中打开页面，打开开发者工具 Console，确认没有 undefined 或 not a function 报错。

如果使用了 usage 模式，检查打包体积是否按预期增加，未使用的 API 不应被 polyfill。

常见坑

不要直接在 webpack.config.js 中寻找 polyfill 配置项，Webpack 5 已移除此类内置选项。

避免将 core-js 版本锁定在 2.x，ES2024 新 API 通常需要 core-js 3 支持。

注意 node_modules 目录默认被 exclude，如果依赖包中使用了新 API 且未转译，需调整 exclude 规则。

常见问题

Webpack 5 有没有内置 ES2024 polyfill 配置？

没有，Webpack 5 不再内置任何 JavaScript 语言特性的 polyfill，必须使用 Babel。

core-js 3 能覆盖所有 ES2024 特性吗？

公开资料中没有看到可靠的量化数据，建议查阅 core-js 仓库的 features 列表确认具体 API 支持情况。

useBuiltIns 选 usage 还是 entry？

推荐 usage，它会自动按需引入 polyfill，避免打包体积过大。

参考来源

Webpack Official Documentation - Migration from v4 to v5 https://webpack.js.org/migrate/5/

Babel Official Documentation - @babel/preset-env https://babeljs.io/docs/babel-preset-env