如何让webpack只为特定的构建导入polyfills？

为了让Webpack只为特定的构建导入polyfills，可以使用Webpack的条件加载功能。条件加载允许根据不同的条件，只为特定的构建加载不同的代码块。

以下是一个示例配置，说明如何只为特定的构建导入polyfills：

1. 首先，安装所需的依赖：

npm install @babel/preset-env --save-dev

1. 在Webpack的配置文件中，添加一个新的entry点，用于导入polyfills。假设我们要为IE浏览器导入polyfills，我们可以在entry中添加一个文件polyfills.js：

module.exports = {
  entry: {
    app: './src/index.js',
    polyfills: './src/polyfills.js'
  },
  output: {
    // 输出配置
  },
  module: {
    // 模块加载配置
  },
  // 其他配置项
};

1. 在polyfills.js文件中，根据浏览器的特性和版本号，动态导入所需的polyfills。这可以使用@babel/preset-env来实现，它可以根据目标环境自动选择和加载polyfills。

// polyfills.js

// 导入核心的polyfills
import 'core-js/stable';
import 'regenerator-runtime/runtime';

// 导入其他需要的polyfills
if (shouldLoadPromisePolyfill()) {
  import('core-js/features/promise');
}

// 根据浏览器的特性和版本号，判断是否需要加载Promise的polyfill
function shouldLoadPromisePolyfill() {
  return (
    !window.Promise || 
    (typeof window.Promise !== 'function') ||
    !window.Promise.prototype.finally
  );
}

在这个示例中，我们首先导入了必要的核心polyfills（例如core-js和regenerator-runtime）。然后，根据浏览器的特性和版本号，我们使用shouldLoadPromisePolyfill()函数判断是否需要加载Promise的polyfill。

1. 使用@babel/preset-env配置Babel，以确保正确地转译和加载polyfills。在项目的根目录中，创建一个.babelrc文件，并添加以下内容：

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

在这个示例中，我们使用了useBuiltIns: 'usage'配置，它会根据代码中的实际使用情况，自动导入所需的polyfills。corejs: 3指定了使用core-js版本3。

这样配置之后，Webpack会根据我们的入口文件配置，只为特定的构建导入相应的polyfills。

在实际开发中，可以根据目标浏览器的需求和项目的特定要求，进一步调整和优化polyfills的加载方式。

注意：上述示例中的代码只是一个简化的示例，实际应用中可能需要根据项目的具体需求进行更多的配置和定制化开发。