导入的 Webpack 模块最终不会成为一个块的原因是什么？

Question

我们有一个相当简单的 app/webpack 设置，如下所示：

babel.config.js

module.exports = {
  plugins: [...],
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'entry',
      corejs: '3'
    }]
  ]
}

index.js

import './polyfill';
import app from './app';
app();

polyfill.js

import 'core-js/stable';
import 'whatwg-fetch';

webpack.config.js

  entry: {
    bundle: [pathToIndexJs]
  }

  optimization: {
    runtimeChunk: false,
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }

我们最终得到两个块，bundle 和 vendors。奇怪的是whatwg-fetch（和core-js）并没有最终形成一个块。当我创建构建并输出 stats.json 文件并使用 Webpack Analyze 对其进行分析时，我在模块列表 (./node_modules/whatwg-fetch/fetch.js) 中看到了该模块，但它的 块 em> 列是空的。我已经通过搜索捆绑代码验证了它不会在任何一个块/捆绑中结束。

如果我将 polyfill 添加到 entry.bundle 数组的开头，这个问题就得到了解决，但我想知道为什么它不首先包含在包中，因为它是一个正常的应用程序导入？我希望它出现在 vendors 包中，因为它是一个 node_module。

Answer 1

如果您使用core-js，则无需在任何地方添加 core-js。 您所要做的就是安装 core-js，创建一个.babelrc 文件并将以下内容放入其中

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

Dubug 参数准确显示了添加了哪些 polyfils 以及添加了哪些内容。 您的代码应如下所示。

index.js

import app from './app';
app();

Webpack 保持原样

更新

我又忘记了一件事，最重要的是你看不到pollyfils。

package.json

"browserslist": [
 "last 2 version",
 ">1%",
 "not dead"
],

当然，你可以调整你想要获取polyffils的浏览器列表->browserl

编辑
"useBuiltIns": "usage" 与 "useBuiltIns": "entry" 有什么区别？ Entry 添加所有 polyfill，Usage 仅添加特定浏览器所需的那些。
编译后的示例文件在使用Usage 后有7KB 47KB，在更改为Entry 后达到114KB！差别很大。