Question

我们有一个相当简单的应用程序/ 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）中看到该模块，但其 chunks 列为空。通过搜索捆绑包代码，我已经证实它不会以大块/捆绑形式出现。

如果我将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参数准确显示添加了哪些多义词，以及向哪些东西添加了什么。您的代码应如下所示。

index.js

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

Webpack保持不变

更新

我忘了一件事，最重要的是您看不到花粉。

package.json

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

当然，您可以调整要获取多重显示的浏览器列表-> browserl

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

导入的Webpack模块不能最终成块的原因是什么？

1 个答案: