webpack - 使用 Webpack 4 进行静态代码拆分

Question

我真的对 Webpack 的代码拆分功能感到困惑。有人可以帮我举一个具体的例子吗？

将捆绑包拆分为基础和扩展

我的应用程序的大多数部分只需要lodash作为外部依赖项。假设只有一个文件base.js：

import * as _ from 'lodash';

console.log(_.toUpper('Hello world!'));

然而，应用程序的一部分也需要moment. 让我们再次考虑一个文件extension.js：

import * as _ from 'lodash';
import * as moment from 'moment';

console.log(_.toUpper(moment().format()));

现在我想把它捆绑起来得到两个不同的文件

• base.bundle.js包含base.js和lodash
• extension.bundle.js包含extension.js和moment

在大多数页面上，我只会包含base.bundle.js并期望只看到一行控制台输出。不过，在某些页面上，我将同时包含这两个包，并希望看到控制台输出的两行。

这可能吗？我怎样才能实现这样的设置？

到目前为止我尝试了什么

• 简单地定义两个不同的入口点将添加lodash到两个包中。

  entry: {
      base: './src/base.js',
      extension: './src/extension.js'
  }
  

• 通过简单的splitChunks优化定义两个不同的入口点将构建四个.bundle.js文件而不是两个：

  entry: {
      base: './src/base.js',
      extension: './src/extension.js'
  },
  optimization: {
      splitChunks: {
          chunks: 'all'
      }
  }
  

• 通过相同的入口点添加这两个文件并为扩展包定义一个显式的 chunkGroup 将生成两个.bundle.js文件，每个文件都包含正确的块。但是，通过这种方法，无法base.bundle.js单独使用（完全没有控制台输出）。

  entry: {
      base: ['./src/base.js', './src/extension.js']
  },
  optimization: {
      splitChunks: {
          cacheGroups: {
              default: false,
              commons: {
                  chunks: 'all',
                  name: 'extension',
                  test: /extension\.js|moment/
              }
          }
      }
  },
  

标签： webpackcode-splitting