Continue learning about what you obtain from the project.
- [Instructor] We will install Webpack by doing 'yarn global' so this will give you access to Webpack command in the terminals, so 'global' and then we will add 'Webpack' at version 2.6.1. This is the longterm sport for Webpack, there might be some different versions by the time you see this, but if you follow this course, if you install Webpack at 2.6.1, everything presented in the following sections will work without any issues. So make sure you install that, I already have it installed, however the yarn will try to update it, and now what will happen is we will have access to the Webpack command in terminal.
So if we type in Webpack and press enter, as you can see, at the moment it will do nothing, because there is no configuration file found. However now you have access to Webpack across all your projects if you need it. Now let's have a look at what else we need to configure in this project in order to get Webpack running, and to build something using Webpack nodals. First of all, we will want to create a source folder in here, so I will go from this back into the editor and inside the basic app I will create a new folder.
Webpack on its own will not run because it doesn't know exactly what to do, so we will need to create a Webpack configuration file which is always called, and should always be called, 'Webpack.config.js' so let's create that file, so going to our basic app, new file, and we will call this, 'Webpack.config.js'. So this title you cannot change it, you need to use this file name for Webpack configuration.
And in here we'll write a few lines, so we will do 'module.exports' We'll do 'equal' and then we'll create an objects, and let's do an entry point for our application, so this entry point will be in Source and App.js which is the file we've just created previously. And let us also create an output for Webpack, so the output would be an object, and in here we will provide the file name of where our app.js- our bundled project is sent.
If we go in our terminal, in our editor, you will see we have this folder that has been created, and app.bundle.js. When you open this bundle, initially, do not get scared, there's a lot of boilerplate that Webpack needs to create, however this boilerplate is, for what we've done now, it's just a console log, it's not necessary, ideal, however whenever you have big projects, this boilerplate will represent maybe 0.1% of the entire code in the project, so do not be scared of what you're seeing here.
However if we scroll all the way down, you'll see that our app.js has been included in the app.bundle.js, so if at this point, we were to include this into an HTML file, we will obtain our 'Hello world' from Webpack in the console. Now let's do exactly that and create an index.html file in which we will be including our app.bundle.js that we're generating with Webpack, so let us create that. We will go into the Dist folder, we will create a new file called this, one second.
So, we have spoken about the advantages of having single page applications, we've looked at a few examples, such as Airbnb and Discord, then we have also installed and set up the most basic Webpack project that we can. And then we've also created our very first Webpack application, which doesn't do anything, however it's there and that's the basis of what we're going to build during the course of this title. In the next section, we will talk a bit more about configuration of the project and how to make sure that Webpack builds our projects correctly, and then towards the end of that section, we will add in all the react goodness that we have from the Myreads app, that will be provided to you.
- 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