Confession: I have no idea how Hot Reload works
First, let me give you some back story.
That was when I met Webpack.
(After I met Babel of course)
What even is Webpack?
If you’ve never worked with Webpack, it’s one of the most painful things you’ll ever have to deal with. If you’re a Webpack veteran, you’ll probably agree that it’s one of the greatest technologies that’s ever been released. I personally fall somewhere in the middle.
This lets you build code in a much more Java-ish way. Now you can create a class, maybe something like this:
And when you want to use your new SpecialConsole class, all you have to do is something like this:
Pretty nifty right? Webpack is the glue that makes this possible. Basically, Webpack will convert these two files into something like this:
(Note that this is a highly simplified example, the Webpack compiled code looks much more cryptic and uses a more intelligent bundling algorithm than just copying and pasting)
Sounds pretty great right?
The problem with Webpack
Webpack is hard to get started on. There’s a large amount of documentation, but it’s written in such a way that it’s only beneficial for someone who actually knows what Webpack is and how it works. I mean, look at this picture on the Webpack home page.
When I first saw that, having no idea what Webpack was, I was very confused.
The Webpack configuration file
Webpack basically requires that you have a giant configuration file, that specifies how Webpack will actually compile your modules. I’ve seen many approaches to writing these files, but I have no difinitive recommendation on how to do it. Personally, I like to go with the “just get it done” approach. Here’s what my configuration file looks like:
Which is a hot mess, I know. The biggest issue is I just don’t care about Webpack. I want it to work, and that’s it. There’s no elegance to writing a Webpack configuration file and the client doesn’t care how well our modules are bundled. In the end, it helps the development process but doesn’t directly improve the final product, and as a result I hate spending time on it.
The alternatives to Webpack tout a much easier setup process (specifically, I’m talking about Browserify). I’ve only had limited interaction with Browserify, so I’ll leave it up to you to deduce you’re own conclusions. Here’s a great comparison of Webpack alternatives.
Getting to Hot Reload
This brings me to my true confession. This is hard for me, because a key component to my job is pretending I know what I’m doing.
I have no idea how Hot Reload works. And how Webpack Dev Server plays in to Hot Reload? Forget about it. And throw in React Hot Loader? No way. Way over my head.
(For this next paragraph take everything you read with a grain of salt. Remember what the title of this article is.)
The problem is when the Hot Reload breaks. Or when there’s a version upgrade. Or you decide you want to tweak something in your Webpack configuration file, and something goes wrong. For me it turns out React Hot Loader doesn’t play well with decorators, which I recently started using. Since I have no idea how this technology works, I can’t make a plan on how to fix it, and I’m stuck with a “guess and check” method.
Unfortunately, this article doesn’t have a happy ending. I’m not sure why I wrote this, maybe it’s a cry for help (not like, with life, just with Hot Reload), maybe it’s just something I had to get off my chest.
Are there any technologies you use but have no idea how they work? In my opinion, the best thing to do in a situation like that is to just say it with pride.
I have no idea how Hot Reload works.