Bundling files

Let's take a look at how Webpack combines our JavaScript files together. Go through the following steps to add a second JavaScript file:

1. In our src folder, create another file. Let’s call it index2.js, for lack of creativity.
2. Inside, add a second console.log:

console.log(‘Hello from index2.js!’);

1. Then, back in index.js (the first one), we’ll require the other file, as follows:

require('./index2.js');
console.log('Hello from index.js!');

This basically means that index.js now tells Webpack, "Hey, I need this other index!"

1. Okay, let’s rerun the same Webpack command as earlier:

node_modules/.bin/webpack src/index.js public/bundle.js

Again, we’ll only specify src/index.js, but if you look at the console output, you’ll see that Webpack now grabs the other file too:

1. Open up public/bundle.js, scroll to the bottom, and you’ll see both console logs.

There’s the beauty of Webpack. We can now expand our app to contain any number of JavaScript files, and use Webpack to merge them all into one.

1. Okay, let’s ensure that those console logs are working. In our public/index.html, add another script tag below the other three:

<script src="bundle.js"></script>

1. Reload the page, open up your console, and you'll have this: