Webpack: Transpiling and Bundling JavaScript

Webpack, touted as a bundler, is a robust compiler platform. In this course, you'll learn the basics of transpiling and bundling JavaScript.
Course info
Rating
(75)
Level
Intermediate
Updated
Jan 30, 2018
Duration
4h 55m
Table of contents
Course Overview
What Is Webpack?
Bundling Code
Accelerating Development
Dev Isn't Prod
Transpiling: Using the Future Now
Understanding Loaders
Running Build Tasks
Troubleshooting with Source Maps
Generating Code
Description
Course info
Rating
(75)
Level
Intermediate
Updated
Jan 30, 2018
Duration
4h 55m
Description

Webpack is the most prevalent bundler for front-end web app development, but more than that, it's a compiler platform. It's everything you need to write modern, modular web applications. In this course, Webpack: Transpiling and Bundling JavaScript, you'll learn the basics of bundling, how to setup a rapid development environment that instantly updates with hot module replacement, and how to parameterize Webpack to optimize production builds for the fastest user experience. First, you'll learn how to integrate the babel-loader so you can write modern JavaScript while providing support for a wide variety of legacy browsers. Next, you'll write several custom loaders, including a code generation loader. Finally, you'll discover how source maps make troubleshooting a breeze. Once you've finished this course you'll understand how Webpack works, what benefits it affords, and how to setup a robust build process to optimize both development and production environments.

About the author
About the author

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.

More from the author
What Is DevOps: Executive Briefing
Beginner
22m
Nov 2, 2018
Implementing a Self-hosted Docker Registry
Intermediate
4h 8m
Jun 5, 2018
More courses by Wes Higbee
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi, my name is Wes Higbee. Welcome to my course, Webpack: Transpiling and Bundling JavaScript. These days, about every other article I read online about JavaScript or front-end development contains some mention of webpack. And that's not really surprising because webpack is a very flexible and powerful build tool. In this course, I'll help you understand what webpack is and why it's useful, how to set up webpack to bundle your JavaScript applications, accelerate development with Hot Module Replacement, optimize a production build, integrate Babel to transpile so you can use modern JavaScript while supporting legacy browsers, look under the hood of webpack to truly understand what's going on, and how to leverage source maps to optimize your development experience. Coming into this course, you should have a basic understanding of JavaScript development, and preferably some experience with writing modular JavaScript. By the end of this course, you'll know how to use webpack to provide the fastest user experience possible in your production application, while also improving your development experience. And you'll be well-prepared to dive into advanced webpack concepts that can further improve your front-end applications. Let's get started.

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?

Transpiling: Using the Future Now
We all know it takes browsers forever to catch up with the latest standards for JavaScript. Even if you start a new application today, chances are, you will want to support browsers that might be 4 or 5 years old or even older, depending on your use case. And that's fine, but why shackle yourself to using JavaScript from 4 or 5 years ago? You shouldn't have to. And that's what we're going to see in this module. We'll see how we can use the future of JavaScript, or actually even just the JavaScript that we have today, while maintaining support for older browsers. There are a number of tools that we can use that can take new language features, even just current language features in JavaScript, and compile them down to something that will run on a larger subset of browsers. Babel's not the only one, though. We also have TypeScript, and in addition to newer language features, TypeScript also provides static type checking and some of its own features like decorators. Flow is a recent addition to the list. It's a lightweight static type checker for JavaScript. And forever now, we've had CoffeeScript, which is a different language that compiles down to JavaScript. And really thinking forward is WebAssembly. It'd be nice to use any or all of these tools in our development when it makes sense, but just imagine what it'd be like if you had to use different tooling for each of these, or you had to write some of your own tooling. It would be a huge hassle.

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.