Let's add some module loading to our NW.js. Webpack and dependency management FTW!

NW.js and Webpack: A match made in heaven

[00:00] Now that we've bootstrapped our application, we might want to add some type of module dependency to our loader, to the node-webkit app, to make our lives much, much easier. We have this bundle.js, and what I'd like to do is actually add webpack to the project, for one because it's awesome, and two, because it's going to make our lives much, much easier.

[00:25] We need to move this bootstrap material into an index.js or some type of starter file so that webpack can load it and bundle it for us instead of us having it in the bundle file. We are going to create a new file. We're going to call it index.js, and we're just going to move what we have in here into that file. We're going to take everything out, put everything in here and save it. That's cool.

[00:47] Webpack uses a file called webpack.config.js that is loaded from the root of our project. We're going to go ahead and create that now so we can configure the webpack, how it loads all the dependencies.

[01:13] Now that we have this file, I'm going to go ahead and copy and paste my standard webpack setup into this file. Here it is. There are a couple of things to note here before we get deep into what's going on. Now, there are other tutorials on Egghead that cover webpack, and I highly recommend you watch them to really get a better idea of how webpack works, but I will give a cursory glance at each of these items here.

[01:45] It loads things like common JS that users require, which is great, I love that. However, so does node-webkit. So, there's going to be a conflict between these two requires, because node-webkit has its own module dependency loader as well.

[02:02] We need to actually tell Node Webpack that we're targeting node-webkit. Did I say node webpack? Well, whatever. We're going to target node-webkit, and then the webpack in the background will do some magic to make it compatible with node-webkit, that's pretty important.

[02:23] We're going to take our entry file and put it in as index.js, so we have that already under this folder here. We're going to output it to the bundle. The bundle is blank now, but it'll overwrite that file. We are going to resolve JavaScript as JS and JSON files without having to type in the extension, so when we're requiring in our loaders, we don't have to worry about those.

[02:46] Then we have these loaders here. Now, one of the things we need to do is we need to actually install webpack to make this work. We do that just by going NPMI, webpack, and then saving it to our package JSON. We're going to go ahead and install that, and you'll notice that there's a bunch of these loaders in here.

[03:11] These loaders are the magic sauce, the secret sauce to how webpack does its thing. Webpack will bundle anything, and I mean anything. It will bundle JPEGs into your JavaScript file, it'll bundle your JSX from React, it'll bundle your SASS. It bundles everything, which is why it's so freaking cool.

[03:28] I use these things called loaders. It's going to look at the extension of whatever it is you're trying to require, and then use the loader to bundle it into your application. These loaders here generally do need to be MPM installed as well. I have most of them installed globally, such as this Babel loader, so I'm not going to install each of these individually, but keep in mind the next step.

[03:52] When we're actually trying to run webpack, if you run into cannot find module, then you just need to install it. That's what we're going to do. We're actually going to run webpack and see how this magic works. You run webpack just by typing webpack into the root of the directory where that webpack config is, but we're actually going to add a flag to watch our files.

[04:13] It'll compile it anytime a file is changed. We are going to go ahead and watch it right now, and see what happens to this bundle. We're going to look at the bundle, and now we see that it is a webpack bundle. In the webpack bundle, we already have our GUI stuff being set up, and our developer menu should actually work.

[04:37] We're going to go ahead and run our original application, and see if everything is hunky dory. Sure enough, it is. We have our hello, and we have our develop toggle menu. That's how we do webpack.

NW.js and Webpack: A match made in heaven

Share this video with your friends