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

Question

I had a quick question regarding the chunk-vendors.js file that gets created during the build process for a Vue Js application.

What is it? How is it created?

The reason I'm asking is to better understand how certain things end up in it. I'm finding it actually has some stuff I don't want.

Answer 1

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.