webpack 4 代码拆分和 var 注入

Question

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

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

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

ReferenceError: regeneratorRuntime is not defined

配置

这是我的 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,
        },
      },
    },
  }
}

问题

在调试时，我们看到 vendor 是在 manifest 之后加载的，最后是 app。但是应用程序在 vendor.

之前执行

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

怎么办？

以下是我的选择：

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

Answer 1

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

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

这是 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

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

根据我对 split-chunks-plugin 文档的理解

The test option controls which modules are selected by this cache group. Omitting it selects all modules.

因此从 cacheGroup 选项中删除 test 将导致所有代码都将移至供应商包。

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

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',
    },
  },
}

所以我们告诉 webpack babel-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。

希望对您有所帮助！

webpack 4 代码拆分和 var 注入

webpack 4 code splitting and var injection

javascript

webpack

code-splitting

webpack-4

babel-polyfill

配置

问题

怎么办？

1/ 使用解决方法和重复加载的脚本

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