In this exercise, we practice using Webpack to bundle multiple JavaScript files.
Take a look at the file structure of our project on the right by clicking on the folder icon. Our src directory has three JavaScript files. greetUser.js and myUser.js provide utility data and functionality to index.js. In a typical static web project, we would have to put all three scripts into our HTML page and include them in the right order. Managing and importing these scripts gets harder as our projects get more complex. Build tools like Webpack help make including resources easier.
Webpack will allow us to use import
and export
statements on all our front-end files, not just JavaScript. If you need a review of ES6 module syntax, check out the Implementing Modules Using ES6 Syntax article. When we build Webpack stitches all our files together as if we wrote them as one.
Let’s practice bundling several files with Webpack!
Instructions
Let’s start by importing the function from greetUser.js as greet
and the data from myUser.js as user
into src/index.js.
Next, let’s add export statements to greetUser.js and myUser.js. Export greet
from greetUser.js and user
from myUser.js.
Let’s run the build
command.
There’s still going to be a warning about the mode, we will fix that in the next Exercise.
Take a look at the built code inside of dist/main.js.
Click “Run” when you are ready to move on.