配置

这是我的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放入app bundle而不是vendor bundle：我不想要
让webpack执行代码拆分：我不想要这样做，因为在现实世界中我甚至需要在供应商发布之间进行非常长的缓存并尽可能减少应用程序
webpack配置不正确：请告诉我：）
这可能是一个错误：很酷，我会尽快打开一个问题

Answer 1

让我们首先将polyfill加载并作为每个入口点的一部分执行（如babel-polyfill doc中所示），以便它看起来像这样

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

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

根据我对split-chunks-plugin doc

的理解

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

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

知道我们有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 /使用import而不是脚本加载器

在index.js

中

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

// ...

webpack.config.js

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

这样可以确保应用程序需要填充。

希望它有所帮助！

webpack 4代码分割和var注入

配置

问题

怎么办？

1 个答案:

1 /使用变通方法和重复加载的脚本

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