Look into the steps for installing Babel and learn how to add Babel to your webpack application.
- [Instructor] Hi, and welcome to the second section of this cycle, the single React productivity with Webpack. In the previous sections, we have had a look at why Webpack has become such a popular tool and why single page applications are being more and more developed by big companies and small companies alike. In this section, we will have a look at how to configure our React projects to work with Webpack, and then we will also include our MyReads application that I presented previously into our code and deal with all the issues that will arise from including the React, the React application into our project.
Then after that, we will discuss a bit about performance boost with Webpack and as I mentioned, if you remembered when I mentioned loading few files, it's not always best to just load one file, so we will talk about code splitting and why we like to do that. And after that, we will also talk about cache busting in perfect performance using that. And towards the end, we'll have a look at creating subscripts that clean up your art projects and prepare it for deployment. In the first video of this section, we will be setting up Babel and React for our projects so that we can get React code into our application.
In this, we will cover the following topics. We will install Babel, we will configure Babel, we will add React to our project, and then we will expand the basic application that we've built in the last video to include React and let us output something to the screen using React. If you remember, in the previous video, we've created this very, very simple (mumbles) app, which does nothing, just outputs something in the console whenever we run it. So let's get to work on this. Let's create an actual application for us to use.
To do that, we will go back into our code editor. We'll go into our webpack.config.js, and we will make a few tweaks here and there just to make everything look a bit nicer and run a bit smoother. So let's comment the existing lines, and let us create a new one, so a new conflict file, (keyboard clicks) so we'll do var, we'll call webpack, and we will require Webpack that we have installed last time, webpack, we will also require the path, which we will use in order to define where every, where the build directories are going, so we will require path in this case.
And we will also set some variables for our build directory and app directory, so this way, whenever you want to update your project or restructure your project, you don't have to do everywhere, you can just do it in those variables at the top and then just reuse them after. So we will call this our build directory, and this one will be path and then .resolve, and we will use their name, which is the current directory, and then we will also add the build directory, which we mentioned will be our, dist folder.
So this build directory will be in our dir. Also, we will like to path join instead of resolve, so we will use join here. And then, we will also set another variable that we will use for the actual code that we're writing. And this is going to be called app dir. So do var, and this is going to be our code directory, and this will be path.join, and in this case, we will use dirname again.
This is dist here, okay. And this will be the src folder that we have, src. Once we're done with this, let's create a conflict variable. Again, this is not necessary. You can just export everything by default, however, I do like creating those variables so that we can tweak them easily. We'll do a config and in here, we will basically just transcribe everything we have about, so basically, our entry point, and then our project output.
So in this case, let's do again entry, and our entry will be the app directory, plus we called our application in source, we called it app.js, app.js, and then let's also create an output for, don't forget the slash here, let's also create the output, which will be the build directory as you can see, and then, in here, we need to set an object actually.
We'll set the object, and then, we will do the path here, which is the build directory, and then the file name, which will be the app.bundle.js. Now, we will save this new Webpack configuration, also export the conflict file of course, so we will export it as well. So we will do module.exports. And we will make sure we export our config variable that we've declared.
Now let's run this into the terminal and see what happens. If you remember last time, we added Webpack globally, however, in this case, we are specifically requiring Webpack into this project, so we will need to install Webpack locally as well. So to do that, we will just do yarn add, and then we will do Webpack, and make sure you do the version 2.6.1 and then the flag -D, so that it installs it as a development dependency.
And hopefully, this will install everything that you need to run it. And now, we will do Webpack again, run it. As you can see, it says invalid configuration object. The provided value is an absolute path. We need to use the output path to specifically, to specify absolute pathways. So we'll have to go back into our config and fix this issue. Make sure whenever you are creating Webpack configurations, make sure to run relative files and not absolute files.
So in order to do that, we'll just go back into our Webpack config and remove the slash at the beginning of app.bundle.js so it's no longer an absolute path. And then when we go back into our terminal, we will run Webpack again, and as you can see, it has built our app.bundle.js, and it has added it in here. So now that we've installed Webpack into our project, it will also show up into our package json. So as you can see, we have a new object here called devDependencies, which is Webpack 2.6.1.
One thing that I would recommend doing at this point is editing our package json and creating a scripts object that will allow us to run Webpack much easier than running it manually every time in the terminal, and we will expand upon those scripts further on during this title. Let's add the script files in now. We'll create a scripts, and this one will be an object. Don't forget to put the training comma at the end. And we will call it, let's just call it dev, 'cause we are developing, and this dev script will run Webpack.
And then you can also add the flag -D, so Webpack runs in development mode and doesn't spend a lot of time trying to compile everything down. So at least as long as we're developing our project. So let's save this. And let's go back into our terminal and run this script and see what happens.
- 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