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

Question

我有一个关于在chunk-vendors.jsVue Js 应用程序的构建过程中创建的文件的快速问题。

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

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

Answer 1

的chunk-vendors.js，如它的名字一样，是所有不属于你自己的模块捆绑，而是来自其他各方。它们被称为第三方模块或供应商模块。

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

在 webpack 3 中，你必须自己做，并且你必须做一些样板才能有至少 2 个块：一个用于你自己的代码，一个用于/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 配置，它将使用默认值。