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.