无法找到@babel/preset-polyfill模块，Webpack4配置问题求助

你遇到的问题核心是把@babel/polyfill当成了Babel预设（preset）来配置，但实际上它并不是一个预设，而是一个提供ES兼容补丁的npm包——这就是报错提示找不到@babel/preset-polyfill模块的根本原因。

错误原因拆解 #

你的Babel配置里错误地将@babel/polyfill放进了presets数组：

options: {
  presets: ["@babel/preset-env", "@babel/preset-react", "@babel/polyfill"]
}

Babel会把presets里的每一项都当作预设插件去查找，而@babel/polyfill本身是一个包含补丁代码的包，并非预设插件，所以才会触发"Cannot find module '@babel/preset-polyfill'"的错误。

正确的配置方式 #

下面是两种推荐的使用@babel/polyfill的方法，按需选择即可：

方法1：直接在入口文件引入（简单直接）

1. 先确保已经安装依赖：

npm install @babel/polyfill --save

2. 在你的入口文件src/index.js最顶部添加引入语句：

import '@babel/polyfill';

同时记得把Babel配置里presets数组中的@babel/polyfill删除。

方法2：通过@babel/preset-env自动按需引入（推荐，减少打包体积）

这种方式会根据你配置的目标浏览器/环境，自动引入代码实际需要的polyfill，避免打包冗余代码：

1. 安装依赖（如果使用corejs@3版本，需要额外安装）：

npm install @babel/polyfill core-js@3 --save

2. 修改Babel的presets配置，删除@babel/polyfill，并给@babel/preset-env添加配置项：

options: {
  presets: [
    ["@babel/preset-env", {
      "useBuiltIns": "usage", // 可选值："usage"（自动按需引入）或"entry"（需手动在入口引入一次）
      "corejs": 3 // 指定corejs版本，避免Babel抛出警告
    }],
    "@babel/preset-react"
  ]
}

• 若选useBuiltIns: "usage"：无需手动引入@babel/polyfill，Babel会自动检测代码中用到的ES特性，按需添加对应的补丁。
• 若选useBuiltIns: "entry"：仍需要在入口文件顶部手动引入import '@babel/polyfill';，Babel会根据目标环境过滤掉不需要的补丁代码。

修改后的完整Webpack配置示例 #

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              ["@babel/preset-env", {
                "useBuiltIns": "usage",
                "corejs": 3
              }],
              "@babel/preset-react"
            ]
          }
        }
      },
      {
        test: /\.html$/,
        use: [{
          loader: "html-loader",
          options: { minimize: true }
        }]
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

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