webpack 4 代码拆分和 var 注入答案

【问题标题】：webpack 4 code splitting and var injectionwebpack 4 代码拆分和 var 注入
【发布时间】：2018-10-08 06:59:14
【问题描述】：

我尝试使用 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,
        },
      },
    },
  }
}

问题

在调试时，我们看到 vendor 是在 manifest 之后加载的，最后是 app。但应用是在供应商之前执行的。

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

怎么办？

以下是我的选择：

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

【问题讨论】：

我会尝试更接近 babel 插件。也许使用babel-preset-env。将babel-polyfill 放入 webpack 配置有什么问题？但是，如果您不喜欢它，请只输入babel-regenerator-runtime 看这里：stackoverflow.com/a/36590887/3233796
babel 不相关，例如 script-load!jquery 也会出现同样的问题。可能不清楚，但我希望在供应商包中使用 babel-polyfill，而不是在应用程序包中

标签： javascript webpack code-splitting webpack-4 babel-polyfill

【解决方案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 文档的理解

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

因此，从 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。

希望对你有帮助！

【讨论】：