Web-Pack

Oct 15 2018

I've recently completed a few different tutorials on webpack. It took me a while to wrap my head around what's going on (mainly because the way I was building websites wasn't really module based - I just had one JS file that took care of everything. Also it seemed that Django took care of some of the things that webpack did - like organise static files so I didn't quite appreciate it at first). However, once I got the main ideas sorted I could see the big benefits that webpack provides.

As every other webpack related site will tell you, "webpack is a module bundler, but it is also so much more". Basically, when you create a JavaScript file (file_1.js), you can export it's content and import it all with one line of code into another JavaScript file (file_2.js) to use there. Pretty handy. However, when you place these files into your HTML via script tags, if you get their order wrong e.g try to load file_2.js before file_1.js then the program won't work (basically file_2.js can't access the code in file_1.js if it's loaded before it). If you're building websites using this kind of module method (and there are definitely benefits to this popularized through frameworks like React), the whole process of making sure you order the scripts correctly in HTML is annoying. This is where webpack can help. webpack will order all the dependencies for you automatically. This is the module bundling component.

This type of module bundling can also extend to CSS files so you can organise your JS and CSS via components easier. webpack can also minify your code through UglifyJS plugin, which just makes it more efficient to load, but impossible to read, so you should only do this in your production builds, not your development builds. If you specify the mode, webpack will minify/unminify automatically.

There are a whole host of other things webpack can do like hot-loading (you see your code changes instantly instead of having to refresh the server page), which I suppose is pretty handy...but not something I've really required. A multitude of other plug-ins exist too. In order to set it up with Django I used some information found in Chong Kim's video https://www.youtube.com/watch?v=A2vEazcfJ7U.

Now, my goal is create a site using this module/components method. I've already looked up how to connect Django and webpack and it looks pretty cool. So that's the next step.