React Webpack Setup From Scratch

hi everyone it's james here and in this tutorial i'm going to show you how to create a webpack config from scratch for your react apps so we're going to start from a completely blank workspace we're going to install all the dependencies and create all of the configuration files which will take your source react files and then convert them into something that is usable in the browser and at the end of the video i'll show you a couple of other plugins that you can use and also how to do a production build so that your code is ready to be deployed to a server somewhere so keep watching to the end of the video to see how that works let's start off by creating a new project and installing all the dependencies that you're going to need for this tutorial okay so let's start creating our custom webpack setup for our react project we're going to actually install all of the dependencies first then create our webpack configuration and then finally we'll actually put together a small react component just to check that everything's working if you have a second before we start if you could subscribe and like this video to support the channel then that would be much appreciated okay so here i am in visual studio code and i've just got a literally an empty folder at the moment and the first thing i'm going to do is just initialize this as an npm project so we'll just do npm init and i'll just accept all of the defaults and essentially what that will do is create our package.json file so that was pretty straightforward let's actually now go ahead and install our dependencies and i'm actually going to install the react dependencies to start off with so we'll have react and react on and once those have installed you'll see that the dependencies property in our package.json has been updated to reflect that they are now installed okay so what we're going to actually need to do now is install our development dependencies and there's quite a few of these because we need to handle our jsx code for react and also we're going to be using sas as well so we need to actually uh include that and the appropriate loaders for webpack to do that so bear with me and we'll put in the list of dependencies that we need i'll put a list of these in the description if you just want to copy them yourself so let's say npm install and as dev dependencies this time we want babel core babble preset m and also babel preset react and then for our webpack loaders we want to have a babble loader and also we want to have a file loader and you'll see what this is for a little bit later on in the video but we also want to handle our styles as well so we'll have css loader sas loader and actually sas itself okay so those are all the loaders for sass we actually want to include webpack as well so we'll have webpack and also the web pack cli so let's go ahead and install those now and once those are done you can see in the package.json all of the dev dependencies that are installed and i'll just talk you quickly through what each of those are so webpack and the webpack cli will allow us to bundle our code so that it's ready for the browser the sas loader and sas will take care of converting our sas files into css and then the css loader will actually just load our css into our ultimate html document and i've actually noticed i've missed one out here as well so we need an additional one in our dev dependencies which is style loader so let's go ahead and add that so in addition to the css loader this style load will actually create a new style tag in our html output and load in all of the styles that have been converted from sas and you'll see how that works when we actually get to a working application the file loader will actually use to actually import a html file into our overall output and so the bubble loader and all of the babel libraries here will actually convert the react code in particular the jsx into browser-readable code for us so without those our react code won't work in the browser and on that note we need to tell babel what we're actually uh using here as well and we can do that in a couple of different ways um but probably the easiest way is to create a babel rc file and in here we just tell it what presets we're going to be using so for example we'll just set a presets property in an array and we just tell it we're going to be using the babel stuff that we've just loaded in so the preset m and also if i can spell the preset react okay so our environment's kind of configured now to accept react code but we still need to create a webpack config which will take our source files and then create a bundle that can be used in the browser so let's create that now so create a file called webpack.config.js and this essentially runs in a node environment not in the browser so we can do things like this where we can actually use a require statement and pull in a node library such as path and i'm going to leave that there because we're going to use that in just a moment to work with some paths within our file so the main thing with a webpack file is it exports a an object um that can be used with the actual webpack library itself and this object has several different properties so we're going to work through these in turn the first is a property called output and this is where we actually want the files to be sent once they've been bundled with webpack so we'll take our source files pass them through all of the presets and loaders and then create an output file which will actually run in the browser so for the output i'm going to set a path property where we actually want to set it to so i'm going to use that path library and we'll take the existing directory name that we're in and basically we're going to set our output to be in a folder called dist obviously you can change it to anything that you like though so our overall uh reacts application code will be inside a javascript file called index.bundle.js so as a version 5 webpack actually comes bundled with the development server so we can specify some properties for that so we can actually run a serv command and then have live updating of our react application as we're developing it so i'm going to set some properties for that i can set a specific port number for it and i'm just going to say watch for changes by setting watch content base to true so that's configuration for our dev server now we actually get into the meat of how webpack is going to take our source files and compile them into a browser ready bundle so we do that inside of a module property and we set up various rules to handle different types of files so inside of this rules array i'm going to create an object and this object has some properties to identify files and what to do with them so we basically have this test property which takes a regular expression so we need to tell it what type of files to match so we'll say match files that have got the extension.js or potentially jsx and only match that at the end of the file name so basically this will match any js or jsx files that are in our source folders and then we want to also say when you actually find one of those files what do we want to do well we want to load that into webpack using the babel loader so that was one of the dependencies that we actually imported in the first step of our setup and one thing that might be good to do here is to actually exclude the node modules as well just in case webpack is trying to find any files inside of there because they should already be compiled and ready to be used within an application we don't want to necessarily go through all of our node modules and load them into webpack in this way so that handles all of the react code with js and jsx extensions we also want to handle our sas files as well but we don't want to pass them into the bubble loader we want to send them to the style loaders that we imported earlier on so again we'll match any files that have scss as the extension and if we find one of those files what do we want to use well we want to use several loaders this time because there's several things that need to happen to the scss before it gets into the application and we want to use the style loader which if you remember we'll create a style tag in our index page when it's output and we also want to use the css loader to make sure we can load css files and of course the sas loader to ultimately convert our sas files into css which is usable by the browser okay so that is pretty much our completed webpack config we just actually need to invoke webpack to actually run this and we'll do that in just a moment but let's actually create some source files first that webpack has actually got to work with so i'm going to create a new folder called source and inside here is where all of our react type source files are going to be so i'm going to create an app.js file which will be the main entry point for react i'm going to create an app.scss file to handle our styles i'm also going to create an index page which will populate in a moment and finally i'm going to create a file specifically for webpack which will actually set off the webpack bundling for us okay so we're only going to create a simple react component for this demonstration in the tutorial today but let's just do that by first of all importing react from react and we'll just export one function for our app which will basically just return a small amount of jsx so we'll create one div which has a h1 element inside it and we'll just say welcome and just to show that we've got some dynamic binding going on we'll create a new date and just convert it to a string and we'll display that to the user okay so that's our simple react app component setup we could actually mount that into the document here but i'm going to put that into the index.js file it doesn't really matter where it goes but just to keep this separate for this particular component but before we do that let's create our placeholder html so we can actually have somewhere to load our react app into and i'll do that just by creating a div with an id of app which we can then reference when we're mounting it with react-dom okay so in our index file uh what i'm going to do is again i'm going to import react and also this time dom and let's import our app component that we just created a moment ago and let's get a reference to the app element that we just created in the html file so it was an id of app and then we'll use react-dom to mount that app component that we just imported onto the app element okay so there's a little bit of work to do to link this index file into index.html if you look at it at the moment if we went to uh live server for example you can see there's absolutely nothing on the page we've got the actual title there but there's there's no javascript running in there at all at the moment so we need to make this a link to this index file to start off with and we do that by just coming into here to add a script tag but the source that we actually put to the script tag isn't index.js if you refer back to the webpack config our output is actually going to be in a file called index.bundle.js so that is what we actually need to reference here in the source of the script tag now you'll see here in the console that we're actually getting an error because that file doesn't actually exist in the source folder but when webpack actually runs through this and compiles everything that file will be there and we'll be able to see this working in the browser just to demonstrate the whole reason why we need webpack in this instance if we were to just actually reference the index.js file you'll see the first error that we get in the console is just saying we can't use an import statement outside a module and that's because the browser currently doesn't actually understand all of these import statements and we need to use webpack and babel to actually convert these into a browser friendly format okay so hopefully that explains why we're actually using webpack in the first place okay so let's set that script to source back to index.bundle and one thing to do in the index.js file is to make sure that when webpack runs through all of our files it actually includes this index.html file in the output so if you think of this index.js file as the starting point for webpack it will basically look through everything that's inside of here and include that in the output and currently at the moment we don't have a reference to the html file so we need to add that in there and we can do that with a special require statement so we require the file loader which we included as a dev dependency in one of the earlier steps and for that we then pass in a funky kind of string where we specify the name and extension of the file that we want to load and ultimately we just put index.html onto the end of that string so with that in place that will actually load the index.html file into webpack as well and include that in the final output okay so i think we're about ready to actually pass all of this code into webpack and see what happens to do that we could just use webpack directly from the command line but it's much more convenient to create a script within your package.json so that you can run it with the npm run command and so here i'm just going to get rid of our default test script that we've got here and i'm going to create a new one called serve and to use the webpack dev server we simply say webpack with the serve option and we also can set the mode to development to speed up our reload time so if we save that now let's actually run that with npm run serve so when we run the serve command we get this error saying that we actually need this additional webpack dev server package and i left that off in the original dev dependencies just to show you this message so you can install that in the initial setup of your project but if you forget to install it webpack will remind you and if we just accept the default there to install it we'll install that new package and that should get our dev server up and running okay so when that package is installed or if you installed it previously you'll actually get a success message like this and if you scroll up to see the message just up here as well webpack will actually let us know that the project is running on the port that we specified so let's actually head over there now and see how that looks so you can see in the browser now that the actual react app is running you can see it's been mounted and the app component that has the date and welcome message is being displayed there if we were to go over to the app.js file and maybe if you wanted to change the type of function that it actually been displayed from the date and was to save that you can see the webpack dev server will actually automatically reload and change the content appropriately so that's pretty much essential to a development workflow is having the ability to make changes and to instantly see them update otherwise it's a long process having to recompile everything each time okay so with the webpack dev server set up and running let's try and add some styles so we've got a h1 tag here if we were to go to the app.scss file and target that h1 maybe we want to change the color of the font to blue for example if we were to save that you can see the app refreshes but there's no changes to the content that's on the page at the moment and that's because we haven't actually yet made a reference to app.scss within our webpack setup so we know in the webpack config that all of the loaders are in place but in our index.js file we need to include anything in here that we want to be included in the final bundle and that's why we had to put the file loader in for the index page as well but luckily it's pretty simple all we need to do is just say we want to import from our local directory the app.scss file and if we save that name after a quick recompile you can see the text for the h1 tags has now been updated okay so that's a pretty simple setup to get our react code working in the browser there's a couple more things that you might want to do if you were to finish your react app and wanted to push it live somewhere you'd need to actually have the webpack output somewhere on the file system so you can upload it and we can do that by using another webpack command and if we go over to our package.json we can create a new script to do that for us so let's just call it build and actually the command we need is just webpack without the serve option and also what we can do is specify that we want the mode to be production which will make the build take a little bit longer but it will actually set webpack into a production mode so if we want to put any optimizations in there such as minification then that will all be handled for us okay so i'm going to stop the dev server now and what i will do is actually just run that build command to show you what the output looks like and there you go after a few seconds we've got a completed message and we've now got a dist folder as well which if we have a look inside of there we've got our index.html page which is referencing the output bundle and this is basically the bundle that webpack creates so you can't really read that but it's obviously got all of our code that will be able to be used to run our demo react app so with that done we could actually go over to our index.html file in the dist folder and we could open that up with live survey and if we were to visit the url you can see we've got exactly the same content as we did the webpack dev server but except now we've got the bundled files which we could push up to a server if we wanted to so there are loads of more configuration options that we can pass into webpack and one thing i'll just show you which i think is pretty useful especially for development builds as well is to actually have separate css created instead of having it inside of our javascript file so for example if we look at our completely built app you can see obviously the styles are being applied but you'll notice in the dist folder there isn't a separate css file and inside of our head we've just got a style tag with the rules from the scss file embedded in there so i think it's nice to have your css in a separate file so one way you could do that is to use an additional webpack plugin to actually filter off the css into a separate file so let's install that now with npm so it's a dev dependency and the particular plugin i'm going to use is called mini css extract plugin okay and when that's loaded in we can just require it in our webpack config.js let's just give it a name so mini css extract plugin is equal to require same name for the package and down here instead of using the style loader which is the loader that actually creates the style tag in our head of the document instead of using that we'll just replace it with the mini css extract plugin and just grab its loader property okay and then just to finish up at the bottom of our config here we specify a plugins property and we just make sure that we've included the mini css extract plugin and if we save that config now and rerun our build you can see in our disk folder we've now got main.css which actually has the compile styles in there this won't have been added actually to the index.html file there so if we refresh the live browser and update that we've actually lost our styles now so one thing we'll need to do in our index.html is just as we did with the bundle.js is just put a link to main.css and if we run the build one more time you can see these styles are reapplied and if we have a look in our network we should see that the main.css file has been loaded in as via a network request and we're no longer using the style tag in the head so as i say there are loads more customizations that you can do like that depending on how you want your project to be set up and it's just a case of going through the webpack documentation or doing a bit of googling to get the result that you're after okay so i'm going to leave it there for this tutorial hopefully you've found it useful and you know a bit more about webpack and how to configure it to actually work with your react code and projects if you have a second before you go don't forget to subscribe to support the channel and as always thanks for watching and i'll see you next time you

Channel: Junior Developer Central

Views: 13,711

Rating: 4.9768786 out of 5

Keywords: react webpack, react webpack babel 2020, react webpack production build, react webpack setup from scratch, react webpack code splitting, react webpack 2020, react webpack scss, react webpack from scratch, react webpack setup, react, webpack, tutorial, webpack tutorial

Id: WDpxqopXd9U

Length: 20min 52sec (1252 seconds)

Published: Tue Feb 23 2021