Learn

In this exercise, we will use Webpack to process a single JavaScript file in our project.

Big files take longer to load. However, as projects get bigger and more complex, they require a lot of code. We could try to write code using as few characters as possible, but this can make it very hard to read. Can we write code that is easy to read but fast to download?

Build tools allow us to do just that. We can improve source code readability with functions, comments, and more. Webpack will remove much of this when creating the content served to the end-user. We can write easy-to-read code, run Webpack on it, and give the processed version to users. Both versions display the same content, and the user wouldn’t know the difference.

Let’s practice running Webpack on a JavaScript file and check out the optimized Webpack output.

Instructions

1.

Take a look at the code in index.js.

Then, run the build command we defined in the previous lesson.

There’s still going to be a warning about the mode, we will fix that in Exercise 5.

2.

Check out the output in dist/main.js. Notice that there is less code than in the source file.

Click “Run” when ready to proceed.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?