1

我尝试使用 webpack 4 进行代码拆分（之前使用 webpack 3 的配置正常工作）

我创建了一个存储库来轻松重现我的问题：https ://github.com/iamdey/RD-webpack4-code-split

我通常会遇到以下错误，因为我想在供应商包中进行代码拆分和 babel-polyfill：

ReferenceError：未定义 regeneratorRuntime

配置

这是我的 webpack 配置：

{
  entry: {
    app: ['./src/index.js'],
    vendor: [
      'babel-polyfill',
      'moment',
    ],
  },
  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      chunksSortMode: (chunk1, chunk2) => {
        // make sure babel-polyfill in vendors is loaded before app
        const order = ['manifest', 'vendor', 'app'];
        const order1 = order.indexOf(chunk1.names[0]);
        const order2 = order.indexOf(chunk2.names[0]);

        return order1 - order2;
      },
    }),
  ],
  optimization: {
    runtimeChunk: {
      name: 'manifest',
    },
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'initial',
          name: 'vendor',
          test: 'vendor',
          enforce: true,
        },
      },
    },
  }
}

问题

调试时，我们看到供应商在清单和最后应用程序之后立即加载。但是应用程序在供应商之前执行。

如果我删除了splitChunks选项，就像在清单之前一样，供应商会被加载，但供应商会在加载应用程序之前直接执行。在这种情况下，问题是拆分产生了不好的影响：块在供应商和应用程序中重复。

该怎么办 ？

以下是我的选择：

  • 将 polyfill 放入应用程序包而不是供应商包中：我不想要那个
  • 让 webpack 自己进行代码拆分：我不希望这样，因为在现实世界中，即使在供应商的版本之间，我也想要一个很长的缓存，并让应用程序尽可能小
  • webpack 配置不正确：请告诉我 :)
  • 这可能是一个错误：酷，我会尽快打开一个问题
4

1 回答 1

1

让我们首先将 polyfill 作为每个入口点的一部分加载和执行（如babel-polyfill文档中所示），使其看起来像这样

app: ['babel-polyfill', './src/index.js'],
vendor: ['moment'],

这是 a 之后的输出npm run start2：

                           Asset       Size    Chunks             Chunk Names
     app.53452b510a24e3c11f03.js    419 KiB       app  [emitted]  app
manifest.16093f9bf9de1cb39c92.js   5.31 KiB  manifest  [emitted]  manifest
  vendor.e3f405ffdcf40fa83b3a.js    558 KiB    vendor  [emitted]  vendor

我的理解是设置babel-polyfill告诉entry.appwebpack 应用程序需要 polyfill。供应商中定义的包告诉 splitChunk 插件在缓存组中捆绑哪些包。

鉴于我对split-chunks-plugin文档的理解

测试选项控制此缓存组选择哪些模块。省略它会选择所有模块。

因此test，从cacheGroup选项中删除将导致所有代码将被移动到供应商捆绑包。

知道我们有两个解决方案。

1/ 使用解决方法并复制加载的脚本

{
  entry: {
    app: [
      'babel-polyfill',
      './src/index.js',
    ],
    vendor: [
      'babel-polyfill',
      'moment',
    ],
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          chunks: 'initial',
          name: 'vendor',
          test: 'vendor',
          enforce: true,
        },
      },
    },
    runtimeChunk: {
      name: 'manifest',
    },
  },
}

所以我们告诉 webpackbabel-polyfill应用程序需要它，我们告诉splitChunks它babel-polyfill并且moment是在缓存组中使用的供应商。

2/ 使用导入而不是脚本加载器

在 index.js 中

import 'babel-polyfill';
import moment from 'moment';

// ...

webpack.config.js

{
  entry: {
    app: [
      './src/index.js',
    ],
    vendor: [
      'babel-polyfill',
      'moment',
    ],
  },
  // ...

这确保应用程序需要 polyfill。

希望能帮助到你！

于 2018-04-27T19:14:20.573 回答