Webpack 2多JS入口配置问题：Babel Polyfill失效及SCSS兼容

我来帮你搞定这个问题～首先得理清为啥改成对象式入口后polyfill失效了：原来单入口时，你把babel-polyfill放在入口数组最前面，它会和后续的JS、SCSS打包进同一个文件里。但改成多入口对象后，只有明确把babel-polyfill加入对应入口数组的文件才会包含它，没加的入口自然就丢失polyfill支持了。

下面给你两种解决方案，适配不同场景：

方案1：每个入口手动包含babel-polyfill（简单直接但有冗余） #

如果只是想快速解决问题，不想调整Babel配置，可以给每个需要polyfill的入口数组都加上babel-polyfill：

const path = require('path');

module.exports = {
  entry: {
    main: ['babel-polyfill', './src/js/main.js', './src/scss/main.scss'],
    // 假设新增了another.js入口，同样加上babel-polyfill
    another: ['babel-polyfill', './src/js/another.js']
  },
  output: {
    path: path.resolve(__dirname, './public/wp-content/themes/designdough/'),
    // 用[name]占位符对应入口对象的key，自动生成对应文件名
    filename: 'assets/js/[name].min.js'
  },
  // 其他loader、plugin配置保持不变
};

⚠️ 注意：这种方式会让每个输出的JS文件都包含一份完整的polyfill代码，导致文件体积增大，适合小项目快速迭代，大项目更推荐下面的方案。

方案2：用Babel自动按需引入polyfill（更高效的现代做法） #

现在babel-polyfill已经被官方推荐用core-js替代，配合@babel/preset-env的useBuiltIns选项，可以自动根据你配置的目标浏览器，按需引入需要的polyfill代码，避免冗余。

步骤1：安装依赖 #

先确保安装了必要的包：

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

步骤2：修改Babel配置 #

在你的babel.config.js或者.babelrc文件中添加如下配置：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        // 根据你的目标浏览器配置，比如支持IE11+
        "ie": "11",
        "chrome": "60"
      },
      "useBuiltIns": "usage", // 自动按需引入polyfill
      "corejs": 3 // 对应你安装的core-js版本（这里是3.x）
    }]
  ]
}

步骤3：调整Webpack入口配置 #

这时你就不需要在Webpack入口里写babel-polyfill了，直接配置多入口即可：

const path = require('path');

module.exports = {
  entry: {
    main: ['./src/js/main.js', './src/scss/main.scss'],
    another: './src/js/another.js'
  },
  output: {
    path: path.resolve(__dirname, './public/wp-content/themes/designdough/'),
    filename: 'assets/js/[name].min.js'
  },
  // 其他loader、plugin配置保持不变
};

这种方式会自动在需要polyfill的代码处插入对应的core-js模块，每个输出文件只会包含它需要的polyfill部分，大大减少冗余代码。

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