What about if I want to output multiple files, such as vendor.js and bundle.js?

Ah ok no problem David.

I think there are definitely circumstances where splitting files for lazy loading is beneficial, such as if you are working on a large scale application. However, bundling everything into one file, such as *.js and *.css files, for medium to small applications is performant as well. For the user, they will be generally experience a slightly longer initial load time during the first visit, anything following that will be super fast as it will have already be downloaded client side. This is beneficial for things like navigation. It's actually better to perform one large HTTP request than it is for two. In addition, the user will download the file and simply cache it for the next visit. A big performance improvement with one 'bundle.js' is to minify/uglify it, this will really make big differences to the file size.

I have used the code splitting in Webpack but it didn't offer much in performance improvement as the project wasn't so large.

Plenty of discussion on Stack Overflow and Reddit.

I don't have any yet. I was watching the course for the first time. My question is:

Webpack is bundling everything on a bundle.js. But on an ideal world, all the dependencies and code for a certain module would be lazy loaded based on the needs.

David Ferreira,

You should be able to do by using Webpack multiple entry points checkout the docs

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

// writes to disk: ./dist/app.js, ./dist/search.js