Explore how webpack works and how to use it to improve your React application and enhance the overall development process.
- [Alex] Hi and welcome to our Webpack for React Applications course. If you have never used Webpack before, if you've previously worked on React projects containing strange webpack.config.js file but never quite wanted to change it or didn't know how to change it, or if you just want to find out more about how to better optimize and run your React applications, you are in the right place. In this title, you'll learn all about how Webpack works, its core functionality as well as how you can improve your React application with Webpack, as well as how you can make the development process much easier process and make it much easier for you to develop React applications when using Webpack.
I'm sure you're all excited to start using Webpack with React, however, before we dive into the videos, it's time for a quick introduction. My name is Alex and I work as a senior front-end developer from one of the leading delivery companies in the UK. I have been working on front-end projects for the past six years, and during all this time, I have developed and deployed numerous sites and React applications for both start-ups and large companies alike. In every project I worked on, I've had two main goals.
First of all, to make sure that the user journey is as close to perfection as possible. Obviously you know a perfect application does not exist, and if it does, please let me know about it. And second, to ensure that all the apps are deployed, are user-performant, and are easy to deploy and maintain. In this title, we will be focusing mostly on the latter point. We will explore some ways in which Webpack helps you make your React application better, how it makes your development faster, and how it makes it easier to manage in the long run.
To do this, we will cover the following topics. First of all, because I believe in learning by doing and not just learning by reading, I will give you a quick introduction to the project we are going to develop over the course of this title. We will take a preexisting React app that handles some bookshelf management and apply Webpack and all the techniques available in Webpack to it in order to increase its performance as well as make it easier to deploy to some of the most common hosting providers using Webpack.
After that, we will import our preexisting React project into our basic Webpack configuration and we will see what we need to do in order to get the application running, and we will also make some performance tweaks to the application to make it more faster for the users. In the third section, we will learn a bit more about the webpack-dev-server and a few more React-specific topics, again, in order to increase your productivity when writing React applications using Webpack.
And in the final section of this title, we will learn about deploying the app we've just created with the help of Webpack to a few of the most common hosting providers, such as GitHub pages and Amazon AWS and Elastic Beanstalk. The requirements for this course is that own a Mac or Linux or a Windows machine, so basically any computer will do, as Webpack is universal across all platforms.
Also, how to handle and optimize your assets, that's your stylesheets, images, and data, and you will also learn how to boost your app performance by optimizing the output files. So, hopefully by the end of the title, you'll have learned everything you need to know in order to be comfortable using Webpack, you have a better understanding of what Webpack does, and how it can really help you up when developing React applications.
So, without further ado, let's move on to section one.
- Setting up Babel
- Loading assets into your project
- Using SCSS in your project
- Cache busting
- Using dev server in your application
- Best practices with webpack dev server
- Getting an app production-ready
- Deployments with AWS S3