javascript - webpack 4 代码拆分和 var 注入(inject)

Question

我尝试让代码拆分与 webpack 4 一起工作(之前的 webpack 3 配置工作正常)

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

我通常会遇到以下错误，因为我想在 vendor 包中进行代码拆分和 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 选项，就像在 list 之前一样，然后加载 vendor ，但 vendor 在加载应用程序之前直接执行。在这种情况下，问题是拆分会产生不良影响: block 在 vendor 和 app 中重复。

做什么？

以下是我的选择:

• 将 polyfill 放入 app bundle 而不是 vendor bundle:我不想这样
• 让 webpack 自己进行代码拆分:我不希望那样，因为在现实世界中，我希望即使在 vendor 的版本之间也有很长的缓存，并使应用程序尽可能小
• 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 将导致所有代码都将移动到 vendor bundle。

知道我们有 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 是在缓存组中使用的 vendor 。

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

在 index.js 中

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

// ...

webpack.config.js

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

这确保应用程序需要 polyfill。

希望对您有所帮助!