What is Webpack?

Confusing Web Dev Terminologies Broken Down— 1

Image for post
Image for post

Webpack is one of those tools we hear and use often, but perhaps have little idea what it actually is and how it works.

To put it simply, webpack is a software that transforms your development files (the files you edit) into production files (the files you deploy).

How is it useful?

First of all, without webpack, it is hard to keep track of dependencies between different JavaScript files. For example, if you have a file square.js where you have defined a class Square, and another file app.js where you plan to use the class, you must include the files in your HTML file in the correct order like so:

This is because app.js depends on square.js. As your codebase grows, it will get exponentially harder to keep track of which functions or variables your code depends on.

Now with the ES6 import keyword, you can tell webpack what each of your file depends on. Following our prior example, your app.js might look like:

Webpack parses all the imports and ultimately generates a bundle.js (it’s just named so by convention) that contains all your code in the correct order.

In addition, you can configure webpack to transpile (the computer science way of saying translate) newer code into ordinary code that is understood by browsers. For example, you might want to write in TypeScript or CoffeeScript (JavaScript-like languages that browsers can’t understand) instead of JavaScript, or you might want to write in ES2015 (a version of JavaScript) syntax without having to worry about older browsers not supporting it, or you might write in SASS (CSS-like language that browsers can’t understand) instead of ordinary CSS. With the right configuration, webpack will transpile all your code into browser-understandable code.

Webpack comes with webpack-dev-server, which allows you to create a local server at http://localhost:8080 with hot-reloading (browser automatically refreshes when you change and save a file). This greatly speeds up development.

In the end, when you want to deploy your code, you can configure webpack to bundle everything (such as js files, css files, fonts, images etc.) into a folder (often named dist, short for distribution). You can simply deploy the dist folder, knowing confidently that your code will work. What’s even better is that webpack knows how to exclude dead assests (files that aren’t actually used) in dist. It can also minify your code to reduce its size.

Webpack manages your code dependencies. It allows you to write modular code in a variety of languages. It also speeds up development and deployment.

That’s it! This has been a high-level overview of webpack. To learn how to actually setup and configure your project with webpack, you’ll next need to understand the 4 core concepts of webpack — entry, output, loaders and plugins. You’ll write your own configuration file (named webpack.config.js). You’ll learn to take full control of your project’s development. I recommend starting with this YouTube tutorial series.

If you enjoyed reading this, consider checking out my other Confusing Web Dev Terminologies Broken Down articles!

The aim of this series is to, well, break down confusing web dev terminologies. If you don’t understand everything in one read-through, then I have failed. Please shout at me in the comments section. If you find any mistakes, please also shout at me in the comments section.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store