What is the chunk-vendors.js file and how is it created? (Webpack)

The chunk-vendors.js, as its name says, is a bundle for all the modules that are not your own, but from other parties. They are called third-party modules, or vendor modules.

Oftentimes, it means (only and) all the modules coming from the /node_modules directory of your project.

In webpack 3, you had to do it on your own, and you had to do a bit of boilerplate to have at least 2 chunks: one for your own code, and one for the modules from the /node_modules directory.

In webpack 4, it is quite simple: you use optimization.splitChunks with the default 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 using webpack 4, it uses the defaults if you don’t change the webpack configuration.