什么是chunk-vendors.js文件，它是如何创建的？（Webpack）

Question

什么是chunk-vendors.js文件，它是如何创建的？（Webpack）

webpackvue-cli-3

39

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

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

我之所以问这个问题，是为了更好地理解某些东西是如何进入其中的。我发现它实际上包含了一些我不想要的内容。

- Nathaniel Deshpande

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- laruiss · Accepted Answer

「chunk-vendors.js」顾名思义是打包那些不属于你自己，而是来自其他方的模块的束。它们被称为第三方模块或供应商模块。

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

在webpack 3中，您必须自己完成，并且必须进行一些样板文件才能至少拥有2个块：一个用于自己的代码，另一个用于来自/node_modules目录的模块。

在webpack 4中，它非常简单：您使用默认的options与optimization.splitChunks。

    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配置，它将使用默认值。