时间戳

首页 > 解决方案 > 导入的 Webpack 模块最终不会成为一个块的原因是什么？

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

问题描述

我们有一个相当简单的 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(and core-js) 并没有以一个块的形式结束。当我创建一个构建并输出一个 stats.json 文件并使用Webpack Analyze对其进行分析时，我在模块列表 (./node_modules/whatwg-fetch/fetch.js) 中看到了该模块，但它的块列是空的。我已经通过搜索捆绑代码验证了它不会在任何一个块/捆绑中结束。

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

标签： webpackwebpack-4webpack-splitchunks

解决方案

如果您使用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。

包.json

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

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

编辑vs添加所有 polyfill 和仅添加特定浏览器所需的那些有
什么区别。 编译后的示例文件在使用47KB 后变为 114KB 后！差异是巨大的。"useBuiltIns": "usage""useBuiltIns": "entry" EntryUsage
7KBUsageEntry

推荐阅读