Progressive Web Apps with React

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!’);

3. 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!"

4. 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 ...