Wes Higbee is passionate about helping companies achieve remarkable results with technology and software. He’s had extensive experience developing software and working with teams to improve how software is developed to meet business objectives. Wes launched Full City Tech to leverage his expertise to help companies delight customers.
What Is Webpack? Welcome to this course about webpack. As I prepared for this course, I wasn't quite sure where I wanted to start. For example, maybe we could start with a definition of what webpack is to describe it on a high level. And, of course, it's often referred to as a bundler. But I really like to think of webpack more as a compiler, a web compiler that can compile all sorts of web artifacts. While this is a concise way to describe webpack, I don't think it's very helpful. Instead, what I'd like to do is take a look at the ways in which you can benefit from webpack on a very high level. I want to show some of the really neat things you can do, and then throughout the rest of this course, we're going to dive into these areas, and we're going to find out how it's actually possible, how webpack works behind the scenes, and how you can take advantage of these things to improve your web applications.
Bundling Code Now that you've got an understanding of some of the major benefits of webpack, let's actually step into an example and start to put it to use to see these benefits in action. What I'd like to do first is set up the sample code for this course. So we're going to pull down the source code for that game of Solitaire that we saw a moment ago. So you can hop out to this GitHub repository and clone or download this. And by the way, make sure you check out the master branch. I'll be pushing updates to this repository throughout the course so you can see all the steps that we took. So I'll do a git clone here, paste in the URL, and, in my case, I'll put this all into a folder called course. And you can see we've got the files here locally. So as a first step, just to get your mind wrapped around things, if you run npm start, this will kick off an npm install, Bower install, and then start up a web server to host the game of Solitaire. Once that tab opens up in your browser, go into the app folder, and the game of Solitaire will load from the index. html page. If you want, you can play a little bit of the game of Solitaire. I always like to play a few rounds from time to time. And then once you get comfortable with the game, at least inside of the browser, let's move on and talk about the structure of this and how that structure would benefit from having webpack.
Accelerating Development Time for one of my favorite aspects of webpack, interactive coding. In other words, how can we accelerate our development process? So a few times now, we've gone through the process of compiling our application. Whenever we make a change, we come over, hit webpack at the command line, and out comes a new bundle that we can then test in the browser. So we write code, we compile that code, generate a bundle, refresh our application. That works great while you're starting out, but if you're like me at all, you prefer not to have to invoke webpack explicitly. That's what we're going to take a look at in this module. So I'll start out by taking a look at the watch mode in webpack. This will simply watch for changes and regenerate your bundle for you. I like to think of this as a first tier of making your coding process more interactive with webpack. Next, we can take a look at hot module replacement, or hot reload. That's the feature where we can literally push code into a running application. For this, we'll be using the webpack-dev-server. This literally is a development server, which means we no longer need to run a web server to host our game of Solitaire. It can do that as well, so it can kill two birds with one stone. Webpack-dev-server also supports a live reload-type functionality to just refresh the browser. We'll see how that works. In fact, that'll be a stepping stone before we get to hot replacement. And again, the difference there, browser refresh versus updating a running application. So the whole focus of this module is to make it easier to write code and see the impact. And I'm doing this at the start of the course so we can benefit throughout.
Dev Isn't Prod It's not that common to have an application that has the exact same code in development as it does in production. So when we're ready to go to production, we need some way to tweak the application to take some of that code out or put some other code in, and that's where configuring webpack per environment can become very beneficial. For example, we saw in the last module how we can inject in hot replacement code. That's something we want in dev but we don't want in prod. We'll see that, as well as other things throughout this module. Now I have a question for you. How do you think we will make our application configurable per environment?
Running Build Tasks If we zoom out a bit and start to think about what it'll take to go from our development environment to production, we'll realize that bundling is one of many things we need to consider. For example, maybe we want to clean some files up. That way, previous build artifacts don't accidentally get released. Maybe we want to copy some files, like an HTML page. Maybe we want to include a fingerprint of our application version, so a Git SHA for example. Maybe we want that to be injected into the application somehow so that we can show it in the UI, or at a minimum, tag our bundle with the correct version of our application so we can troubleshoot when we have problems. We might also want to take all the files that we need to deploy and zip them up. So how do we do these things with webpack? What do you think? Now the short answer is, webpack is meant as a bundler, and I think a compiler platform. But at the end of the day, we're talking about producing a bundle. Beyond that, you don't need to use webpack to do all of these other things, but you can. So in this module, I want to show you how you can do some of these other build tasks with webpack, and I want to encourage you to consider just using other tools. For example, we've been using npm runscripts throughout this course. Moving to webpack doesn't mean obviating all of the tools that you already know and love.
Troubleshooting with Source Maps Bundling is a beautiful thing, and so is using a transformation like Babel or maybe TypeScript to write modern code and have it compiled down to something that's more universal. The problem is all of this becomes a huge problem when things go wrong, because when you're running in the browser and you don't have your original code, troubleshooting based on machine-generated code from maybe Babel or TypeScript, or even the bundle that webpack generates, well, troubleshooting that is not so simple. There's a mapping at play at a minimum, and in some cases, the code you have in the browser is completely obtuse. But, don't fret it, this is where source maps come in. Source maps give us the ability to reference back to the original code so that when we're troubleshooting in the browser at the end of the day, we can usually see that original code. Let's take a look at this.