webpack - 什么是 chunk-vendors.js 文件，它是如何创建的？ (网络包)

Question

我有一个关于 chunk-vendors.js 文件的简短问题，该文件是在 Vue Js 应用程序的构建过程中创建的。

这是什么？ 它是如何创建的？

我问的原因是为了更好地了解某些事情最终是如何出现的。我发现它实际上有一些我不想要的东西。

Answer 1

chunk-vendors.js，顾名思义，是所有不属于您自己，而是来自其他方的模块的捆绑包 。它们被称为第三方模块，或 vendor 模块。

通常，它意味着(仅和)来自您项目的 /node_modules 目录的所有模块。

在 webpack 3 中，你必须自己做，你必须做一些样板文件才能拥有至少 2 个 block :一个用于您自己的代码，一个用于 /node_modules中的模块目录。

在 webpack 4 中，这很简单:你使用 optimization.splitChunks默认的 options:

    module.exports = {
      //...
      optimization: {
        splitChunks: {
          chunks: 'async',
          minSize: 30000,
          maxSize: 0,
          minChunks: 1,
          maxAsyncRequests: 5,
          maxInitialRequests: 3,
          automaticNameDelimiter: '~',
          name: true,
          cacheGroups: {
            vendors: {
              test: /[\\/]node_modules[\\/]/, // this is what you are looking for
              priority: -10
            },
            default: {
              minChunks: 2,
              priority: -20,
              reuseExistingChunk: true
            }
          }
        }
      }
    };

@vue/cli 3 使用 webpack 4，如果你不更改 webpack 配置（参考：change the webpack configuration），它将使用默认值。