What problem does Webpack(er) solve?

This is a work in progress post - as I progress in learning about this stuff - I will update it and make it more accurate as and when I can. In the mean time I hope it helps you. If you find any mistakes etc., please do feel free to: leave a comment or send me an email to my gmail id: ben.chenathara

What is Webpacker?

  • Webpacker is a gem. It’s wrtten in ruby. If you’re using Rails 6, this gem is basically a helps you use another tool called webpack so as to make your experience using Rails with webpack a lot “easier”. Pray you don’t have to configure anything in it - word on the street is that it’s not well documented. Without webpacker, then you would have to configure webpack on your rails project yourself, and understand it too - which is a bit of a pain.

  • Webpack - this is a tool that solves the problems we are going to elaborate on:

What problem(s) do webpacker solve?

It saves you from a lot of manual labour. Stuff which can be automated:

A. Saves you from constant updating

Imagine you want to use a javascript library. So follow the following steps with me (yes, get out your text editor and follow along so you know how much a of a pain it is to actually do):

  1. Go to the libary’s website and download the file e.g. moment.js.
  2. Then you have to save it somewhere on your server (the lib directory) and make it available to the relevant html page where you want that javascript file to operate.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>  
</head>
<body>

  <script src="lib/moment.js"></script>
  <script>
  </script>
</body>
</html>

Great, we’ve got the library. Now we want to actually use it:

// show_time.js
alert(moment().format('MMMM Do YYYY, h:mm:ss a')); // May 14th 2020, 11:01:06 am

Let’s save that in our lib directory too. Now here’s the tricky thing: show_time.js must come AFTER the moment.js. Why? Because show_time.js relies upon moment.js. The javascript gods demand you do things in order.

<!DOCTYPE html>

  1. But guess what: there’s an update for that library. Everytime there is an update, you will have to go and download it and manually update it on your site.

  2. Webpack, in conjunction with Yarn/NPM saves you from this dilemma. Yarn and NPM will download those javascript files for you and update everything with the flick of a wrist.

Problem 1 solved: makes updating easy.

B. Automation

This example is a little contrived but bear with me.

  • Imagine you’ve manually downloaded a javascript file from the internet. Now you have to minify it and then make it available in your website. (We want to minify it so we can improve speeds, to help improve the end user experience). If you have to do this for all your javascript libraries which you are using, it can get very tedious, very quickly.

  • Now imagine you have written something in ES6 javascript syntax - you can think of it as the modern version of Javascript. It makes it marginally easier to use. Wait: can Internet Explorer handle that? What about Firefox? Oh, let’s just convert it to a version that all browsers will be sure to handle. Now we need Babel to convert the javascript. If you’re doing this for all your libraries, it can be very tedious. This stuff can be automated.

  • Now imagine you’ve written something in Elm. The same problem surfaces: you need to get a minified version of the javascript so that your HTML can use it.

C. Including Files.

Written on May 14, 2020