Migrating from Browserify to Webpack

As you might have read from my previous post, I am currently enrolled in FBOA and is working on Socket.IO. One of the tasks he gave us was to migrate bundling from using Browserify to using Webpack, and I wrote in my last post that I was not even sure if I was doing it correctly. Well, as it turned out, I was not, because I have not put any bundling options yet.

Anyway, so I start looking for solutions by Googling "webpack equivalent of browserify options" and got this useful link. However, it was not quite enough, because in the repo I was working on, there are some options that are not listed in that link such as browserify's insertGlobalVars option. After some digging, finally I found out that its equivalent in webpack is externals.

Hopefully it is useful to anyone out there doing something similar. Also, if anyone has any other useful webpack equivalent of any other browserify's options, feel free to comment so I can just add it in to the main post! Happy coding!

Disclaimer: It is not my intention in any way to encourage migration from browserify to webpack. I am just helping those who already made the decision. I am no web dev expert in any way.

The Long Overdue Update: FBOA and Webpack

Hi everyone! Seems like I have only been updating this blog for once a year, huh? Sorry about that; nothing much happened in my life that can be written in this blog anyway. Just to get you all up to speed, I went for an exchange to Tsinghua University in China, which explains why I did not update the blog. I know, using VPN to access blogspot is like just a few clicks difference but then again, as I wrote earlier, nothing particularly significant from what I have been learning that can be put in this blog. During my semester there, I tried to redo an Android Development tutorial, this time from udacity. I also took a module in computer networks though if anything, what I learn is how to make a really fast (but not necessarily scalable) C++ programme instead of anything about computer networks itself.

This coming semester would be totally different. I am enrolled in the Facebook Open Academy (FBOA) programme via NUS under the module code CS3281/2, Thematic Systems Project. If you are curious, I will be working on the open source project Socket.IO. One of the grading aspects of the module is to write a blog post about my progress in the open source project I am working on. Because I am too lazy to create a new one, so I decided to just use this blog. Who knows, this might get the ball rolling for more frequent updates to come!

... And this post is going to be the first of those more frequent updates. My team is assigned to do migration from the tools currently being used by the project to (supposedly, debatable-y) better tools. For example, I am assigned to migrate from using browserify to webpack as the bundling tool. I thought it should not be too difficult (after all, it is our first task given by @rauchg (one of the guys behind socket.io) (I am using too many brackets here)). I guess it is not difficult if you are familiar with web development, but I am not (I should have, but no) so it took me one whole day to figure out how to do it, and I am not even sure if I am doing it correctly.

Learning new tools is never easy. The initial learning curve is almost always very steep, though fortunately it will only get easier over time. Webpack is no exception. I tried reading the Getting Started tutorial the devs provided but I still have no idea how it will fit into the project I am working on. Apparently previously socket.io uses browserify's node.js API and I did not know there is such a thing so I have been trying to integrate the webpack into socket.io's Makefile to no avail.... I thought the 2 tools are very different in terms of how it is being set up. But as it turned out, webpack also has its own node.js API, which I finally found somewhere in the docs. I tried to tweak the test initialization js files and finally managed to make the test runs and passes (yay!). I will probably push and send a pull request tomorrow to let my teammates check it first. After all, I should not be embarrassing NUS by sending some crappy PR, should I?

Sorry if this post is rather confusing or hard to read. It is 3 am in the morning and I just managed to integrate webpack into the project like literally 20 minutes after one whole day of googling so I do not want to have anything to do with it again for the next few hours and wrote this just for my own reference. Anyway, here's to more frequent and higher quality updates in the future!