Webpack has been around since 2012 and it is a very popular tool nowadays. You'll see it mentioned in a lot of front-end stacks. I've personally used it to power this blog and a handful of my own React projects such as https://classic-ah.com (shameless plug 😬)

What exactly Webpack is though? You might get a lot of diverse answers; reason being, Webpack can be extended to do many things with its vast plugin system. Webpack has over 5 revisions already and it can be used for the tiniest of projects and the most complex of projects. This article goes over a brief and very high level overview for what Webpack is, what it is commonly used for, and why you might want to start using it.

What is Webpack?

Webpack is a module bundler, primarily used for front-end. A module can be a Javascript file, a CSS file, an HTML file or many others. Webpack will bundle all of these files up for you in your project. That doesn't sound too interesting by itself, but when you want to serve production-quality front-end assets, techniques such as minifying and transpiling can all be crucial and must-have benefits for your front-end resources. Let's explore these in a bit more detail.

Why use Webpack?

Here are some common use cases for Webpack.

Minifying

Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser - e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on. This can result in huge savings! I've seen assets that take up 15MB of space be minified down to 700KB.

Why does minifying matter?

In a scenario of a webpage, these front-end assets are normally fetched/downloaded by every visitor who comes across your webpage. This is because your webpage depends on these assets to load properly - it needs CSS for proper styling, JS for event based logic and AJAX requests, and more. If you shove 15MB worth of bundled assets to your visitors, it might take them a long time for them to download that, especially on slow connections. The wait time could be the difference between your visitors leaving the webpage vs. actually exploring your content!

Code splitting

Code splitting is also very beneficial. Typically, all of the Javascript is bundled into one large assets file. Code splitting can let you distribute your code more evenly so that they can be split up into chunks of assets files. These files can then be loaded concurrently or sequentially at your preference.

Transpiling

Transpiling is just another word for transcompiling which is just another fancy word for compiling. What does this actually mean?

Javascript comes in many bold flavors and it has come a long way since classic Javascript, long before the days of jQuery or ECMAScript standards. Javascript was a language that was primarily built for browsers, and even the browsers have evolved tremendously since the Netscape days.

Most modern Javascript stacks aren't written in classic Javascript. Nowadays, a lot of Javascript is written in ES6, or Typescript, or some other next-gen Javascript syntax that we don't know about yet. We do this for a reason though; it's much more pleasant to write than classic Javascript. It allows us to write less code for more, and adds new things like Promises which allow for asynchronous calls.

Transpiling comes into play by converting the 'new' Javascript into classic Javascript. Classic Javascript is what browsers understand. If you feed an ancient browser pure Typescript, it's probably not going to understand what it is and will probably result in a bunch of errors. Webpack can transpile our code using Babel plugins, so that our bundled assets are compatible with every browser.

Development Perks

Webpack offers plugins such as hot-reloading, which will allow your front-end to update in real-time as you make changes to the code. This makes development so much nicer.

So... Webpack?

Webpack can be as large and complicated as you want to make it. You can have dev-specific configuration files and production configuration files. You can add caching of assets or module splitting to distribute the size of assets better. There are a myriad of plugins that can transpile all kinds of modules, including React/JSX, SASS/LESS, Typescript, and ES6.

The customizability of Webpack can actually be overwhelming for majority of projects.

In summary:

• If you want to have a basic React project but not worry too much about the granularity of Webpack, consider bootstrapping with frameworks such as create-react-app or Next.js if you want to make your project more SEO friendly. These frameworks still use Webpack, but it comes pre-defined with recommended configurations.
• If you are not relying on modern language/syntax too much, then it might suffice to just use Grunt or Gulp instead of Webpack, and add minify plugins to reduce the size of your assets.