Creating and Understanding a Basic Webpack 5 Setup

welcome to swashbuckling with code i'm jimmy cleveland and in this episode we're going to be talking about webpack in particular we're going to be starting a new project and setting up webpack because i want to show you just how easy it can be to go from xero to having modern javascript transpiling for cross browser support as well as obviously all the good module bundling stuff that comes with webpack now the reason i picked this topic is because i've noticed quite a bit of anxiety around the idea of webpack configs and getting it to work and i think a lot of that stems from i myself have had it in the past i think that stems from all of the awesome tools like the view starters or create react app or that type of thing that give you a working you know web pack set up right from the beginning and that's awesome until you get down the line and you need some customization that it makes it a little more difficult to add or especially if you just want to like start all over you don't really know what you're doing so that is why i picked this because i think that webpack is a little bit misunderstood because you always end up seeing a really really advanced custom setup that's just crazy to follow but it's actually quite simple to set up on your own and to add the pieces one by one and understand the the basics of a standard webpack config and that's what i want to show you here so we're going to be diving into all that if you are unfamiliar with webpack in general uh just a real quick intro to it in the past there's been this this long series of problems with javascript in the browser as far as having to load your scripts load them in the right order to avoid name collisions to deal with minification bundling and all that type of stuff and not just having one you know giant file all that type of stuff and over the evolution of time webpack has kind of proven itself to be uh the champion amongst that there's been some awesome developments along the way that led to it but at this point in time if you want to break your javascript up into multiple files and you want to have it you know bundle them efficiently into one file to serve so that not only is it fast because there's not only that one file to download but it also goes and builds this dependency graph of all the different imports you can use the import export or require common js versus es module syntax as long as as well as getting all of the code splitting and tree shaking and all that cool modern stuff so there's a whole lot to distill there that's as much as i want to talk about that for now because if you're here hopefully it's because uh you're just looking for how can i get this thing set up and how can i understand this thing a little bit better so i think we should just jump right into that [Music] all right let's kick this off with a simple project here so we'll start off by making a directory and we're just going to call that webpack maybe setup go into that directory and then we can create an index dot js file now you could create this with your ide or however you like of course we're going to start off with an npm init dash y since we know that we're going to have some packages here dash y to say yes to all the flags or questions that pop up and uh after that i think what we'll do is we'll touch and index.html as well and then we will open our editor in this directory let me bring that down here and here you go so with our index.js we'll we'll start off just doing a real simple uh you know console.log here and we'll just say ran from index.js oops and in the index.html here we can put uh use the bang abbreviation to just create an html document and then from here well let's actually go into this and say webpack testing why not and then we just want to create a script that is a type of source and that source is going to point to our index.js file and that's it okay so i just always like to get everything just running first and then kind of do it incrementally as we go along and then we'll add our webpack once we need it so to start with this we will reveal this in explorer for me you know i'll just open that up here might as well so we're opening this html file in the browser and if we go to the inspector and go to the console we'll see that we have this ran from index.js i'll bump it up a little bit since we really don't need a lot of space here okay so obviously are things working no surprise there now let's do the first thing that's going to make it to where it will not work that we'll need webpack for which is uh we want to import a file so let's say we're going to import oh i don't know we're going to make let's make a a wizard here from slash wizard that probably should just be default but whatever who cares and then in this file or in in our directory we'll do win uh wizard.js and the wizard will export and then we'll just say const wizard equals and then let's just give it a name not really thinking about anything special here it's just for demo purposes and we just want to import that wizard and then let's say after we said ran from index.js well console.log that wizard all right now if we were to refresh this you can see cannot use import statement outside a module so we'd have to use a module type script import which is pretty atypical to use as of right now um just due to support and everything like that from what i've seen so we want a way to bundle this all together uh in into one file so that the the browser knows that it can just load this one script and everything will be in order and have the proper scopes and in fact let's do one more example here so we'll say um let's we'll import two things so we'll have a barbarian and um if when you're importing you don't have to put the js extension just so you know so we'll have this barbarian here and then we will do barbarian.js export const barbarian equals hulemar and there you go okay and then we'll just console.log that and console.log this and this will be barbarian now obviously that's not going to work all right same thing so this is where we'll first introduce webpack so we will go back to our terminal and in our terminal what we can do is npm i for install so you can type out install if you like and then i'm going to do dash uppercase d this is the equivalent to install dash dash dev but what we want to do is mpmi-d webpack and you need webpack cli whenever you're going to run webpack in this way yeah i don't know what happened there the first command just hung that was pretty weird okay so we've installed uh webpack and webpack cli now and from this point on really um all we need to do is put things in the right directories because uh what a lot of people don't know or at least the people that i've anecdotally encountered is that you don't need any configuration since webpack 4 to run it with a real basic setup which is pretty cool so what you can do this shouldn't work but until we change our folder directories but you could do mpx webpack here and that will use npx to go and grab it's basically a an npm edition to grab the latest version of webpack or use your local one if you have it in this case it can't resolve dot slash source so it's kind of pointing you to the problem it'd be cool if they had a little bit better error message there but it's in their docs so what they want us to do is create a source folder put our index.js in that folder okay update imports actually we want to do all of our stuff in here so might as well just put them all in here for now go to wizard move that into source and now when we go back into index everything should work fine so now we can run npx webpack and you'll see that it ran pretty cool huh so it created this asset main js and what we're going to do is we're going to see that right here in the dist folder so it's automatically set up to look in the source directory for this index.js and output to a main.js here and here we have the file so let's take a quick look at that real quick and it's kind of interesting huh it's got um ustrix so it automatically enables strict mode which uh it does quite a few things but that's essentially that's it's going to make a lot of things that didn't used to cause errors in javascript now cause errors because down the road you'll have more headaches if you don't know the errors up front it does more than that but that's the main thing and then we've got a console log and you can see they're using this comma between each one which is interesting so they're gonna console.log this console.log this console like this so you see there's no like imports or anything like that right like it doesn't have any concept it doesn't even create those variables that we did all it does is it takes all those files and puts it together and it's like what's the end result of this running which is pretty cool it's pretty lean and you saw that it came minified this semicolon just has to do with this whole wrapping this entire expression here thing don't worry too much about that this is a function obviously an arrow function that is then going to get called immediately after this is what's known as an iffy or an immediately invoked functional expression so and that's that now we just need to put it in uh index.html we're good to go so the index.html we're actually going to put into our dist folder here so we can just relatively reference this and we'll pretend that this is like this is our public or our distribution these are the files that we're going to load up somewhere eventually and so now instead of index.js we'll just do main.js because that's our you know end result here and if i were to open this up in fact i need to reveal this and open it again because it's changed directories for me inspect this go over the console and there you go just refreshing you can see that it runs pretty cool so what this has given us is uh you know module bundling right out the bat with zero configuration which is really cool we can use our imports you can use require common js or es imports or anything like that and that's pretty neat now one thing i want to show you uh that was really interesting to me when i was messing around and looking at it and i just really recommend like you don't need to get crazy getting into you know looking at your bundles all the time but it's kind of nice to remove a little bit of that magic and see what's kind of going on under the hood and have some idea there right um like we might not even know that this is causing a whoa where did i go that this is using a um an arrow function on the output so this actually wouldn't run uh on some older browsers which some people might expect it to but without babel and without some settings it's not going to now something that's interesting here real quick is that i'm going to create a another file here and we'll just call this like i don't know get classes or something like that and what i'm going to do is i'm going to create a function called get classes and that is going to in here we're going to get those imports from here and then we will paste those here and then oops we'll go over here and steal these buckaroos and paste those in here so this is pretty silly right i'm just moving it into a function and then i'm going to do export default get classes so now i've got this module that's whole purpose is to just import these two and then console log them now what's interesting about this though to me is that if you were to import and we can call this whatever we want now but we'll keep the name get classes from get classes and then we run it get classes what's going to happen here now we need to bundle every time and at this point we'll want to actually add a script because you might as well and we'll have a build script and that is going to run webpack our local version of webpack so we don't have to use the npx command to type it out anymore though you could if you wished so now we just do npm run build oops i didn't mean to not put a space there it's going to build just fine and then if we go back to our browser here we reload you'll see that this is the same and that shouldn't be too much of a surprise but this might be so if i click if you missed that if i go to the console and i see where this ran from i can just click main.js and go to the source i can click this little pretty print here and take a look at it and this will be nicer than going in and reformatting every single time in our editor because this will stay this way if i reload so you'll see that our output here is actually the same as before that's kind of interesting huh um so we've got these two uh variables that we're creating and then we have a whole function that we're importing that imports those two things and really webpack here doesn't care it's just like well in the end this is really all you need so this is kind of neat but also might be a surprise you might expect to see some of those functions or variables or something created in here and that's not what goes on so just want to show you that real quick so that's the first step of having webpack set up it's pretty simple if you just want the bundle import functionality and nothing special like that there you go that's all there is to it now next what we're going to want to do is add some babel babble whatever your preference uh transpiling because we want our code to uh work in a little bit older browsers and so we're going to want to put that in the pipeline which is just one of the default things that you're going to want to do when you're setting up a webpack okay so in order to do that we there's a couple different ways we can do it but we're just going to opt for simplicity here simplicity's sake we want to come over here and say okay i want to now install and we're going to need babel slash core and we're going to need at babel slash uh what will we need preset e and b yes and finally we're also going to want babel loader now this is our first loader and this is what webpack uses to figure out how to handle certain operations there's like file loaders in case you need to load your css and your js or your images and your c and your js and all that stuff but just so you that you know that's what loaders are a common terminology in webpack so we'll install this first and we need the babel core for obvious reasons that's the core but we also need the preset env and what that's going to do it's pretty cool is it's going to figure out automatically it has some default settings of what the kind of latest browser support how much backwards compatibility we should have that's sort of reasonable based on usage statistics in the web it's the best way to think about it simply so if we come back to here we can now create a new file called webpack.config.js with that webpack config what we can do is start our module.exports now you do need module exports here i believe there's a way to set this up to use um you know the es import export type syntax but since you're not like by default running you know your your webpack or your babel on your actual this webpack file it's an entry point i just stick to the module.exports format i have seen that you can do it other ways but i'm not knowledgeable enough to know that part so i just stick to this it's pretty simple okay now from the beginning uh what we want we actually don't need an entry and an output which you'll commonly see and we'll add that in afterward i just want to show the minimum thing that you need here so you're gonna need a module right and then your module is going to have a set of rules okay and those rules are an array of objects and then at this point you're just going to want to write a test and the test that you're doing is essentially saying like what kind of files do i want to run this against so in our case we're going to escape the js this is a regular expression and we actually want the dollar here and put that there and so we're we're saying you know any file that ends in a js the dollar is just saying ending in and then we want to exclude our node modules we don't want to be running our transpiling on other people's stuff that we are importing any package or anything like that and then this use object is a way to say okay well what loader do you want to use to accomplish this this is just a normal module in webpack you do the same syntax for other loaders and we want the babel loader that we installed okay so it might maybe worth commenting here that without additional settings um this will reference a dot babel rc or any of the other babel extensions so you totally can just put your your babel preset env right here after this but since you're almost always going to want to start doing a little bit more maintenance in the babelrc file to tell it how to behave you're going to want to create one ahead of time you might as well just start there and then all you need to do in this is pretty simple you can just say presets what presets do we need well we need at fable slash preset dash env sorry my brain left me for a moment okay and that's that so what this will do is webpack is going to say hey whenever i encounter any js files except for node modules i will use the loader babel loader which knows to go and look at this so that's going to use our babel core with our babel preset env which is going to just kind of give us some standards to transpile to now when we go back and we run npm run build we're going to see that the output is a little bit different possibly we might actually need some some things to make it different nope it's the same at this point there's nothing that really needs to be transpiled for the latest browsers this arrow function used to um for preset env but we've moved to the point where it's so highly adopted that we don't need to transpile that for most browsers anymore if you're using old you know or if you're trying to support really old browsers then you would and we'll dabble in that in a moment okay so at this point you've got your webpack all set up and it's pretty simplistic and let's add some other things into it to kind of show that uh we have this babel support actually working right so we'll leave this like we ran from index we did the get classes everything's working great but now let's do like const object and we're going to make this object um so hard to come up with names i'll just do like a simple like alpha bees bravo okay and then what i'll do here is i'll say const new object equals object and c let's append charlie here good old charlie and then we'll console.log that new object so we're going to use the spread operator which is newer and just take our old object and turn it into the new one with c concatenate it onto that okay and at this point we should see some uh actual transpiling going on here so the difference between compiling and transpiling is just that uh compiling is actually compiling to either a different type of language or yeah that's the gist of it but transpiling is kind of to the same language but an older version of it so it's adding backwards compatibility just a real quick one there okay so we've run the build and we come back here and actually let's just use the browser here to reload this and you'll see that we have uh all of this a lovely code that it's added it's a whole bunch here you can see it still has our console logs and at the end it has this interesting little like r function uh that you know this looks like an object a sign or something like that it's taking an object and then it's taking um this it starts with an empty one it has this new one and then it adds on to it the c charlie and you can go up here and see that there's a function r defined and we don't really need to dig into what all it's doing but we can see it's doing some get owned property descriptors and define property and all that type of stuff so there's a lot going on here that we would have to write to get this functionality in some older browsers that don't have you know just default spread syntax just to do that safely kind of crazy huh there's a lot of stuff going on under the hood but it's that simple to set that up it's really neat so coming back over to here let's just kind of do this one thing at a time here we've got this mode right and by default it starts off in production and we're going to set it to uh this has to be a string right yeah development and just to show that before we run it this this is a like minified and mangled mangled means it takes all of the variable names and turns them into like one letter definitions to make it even smaller so it's just kind of compressing it as tight as it can no white space all one line all that that's production mode and the default starts like that and that's why it was like that when we just ran it without any config file now we're going to change it to development and when we do development you'll see that when we run the build here what did i do wrong invalid configuration object webpack's been initialized using a configuration object that does not match the api schema mode oh i did it under module i'm an idiot sorry so uh yeah that that's a that's a root level property silly me all right and then we go to main again you'll see whoa it's got all these comments now so it's tried to give us a lot more information on what's going on and this will allow for cool sorts of things like source maps which we're going to add next so if we were to reload this in the browser once again we'll see that it's a completely different whole nonsense setup which is kind of cool because it does tell us you know some extra information and it gives us these little um where are they like source barbarian js it's telling us like where each of these files came from where the methods came from and all that stuff sweet so next okay now what we want is we're probably going to want some sort of like source maps so this is another root level rule we don't need another module at this point uh what we want is just this dev tool and we want to do source map and i don't believe we need a package for that we do need a comma here and we'll come over here rerun it again and we're going to get kind of an auto builder in just a moment so we can just watch these files but for now we're just kind of you know keeping it lean all right so it's made all these things and you can see now let's see if it says it here it doesn't say anything about source maps let's go check it out though so reload this and the difference here should be let's see main js formatted so oh no it actually is working i'm just being silly no oh it swapped over on me that was weird i must not have refreshed on this page or something so you can see that it now tells us where these things are coming from get classes get classes it's pretty neat so if we were to click this here it will take us to the actual file so we can see the code not the uh you know main that's been put everything together so this this main still exists and it's all inclusive it's the only thing the browser is actually running but it sends along this little file here main js map and what this is is a way for it to map between the relationships between our all bundled code and the individual functions and this helps us troubleshoot so when we're in dev mode we probably want source maps and that will allow us to troubleshoot bugs and errors and all that stuff much more easily and we get that so easily by just adding devtool source map now at this point we are pretty tired running npm run build over and over again so let's get some developer experience up in here and it's neat about webpack is it actually comes with a dash dash oops dash watch flag and what that is going to do is make it to our left to show that what i'll do is i'll actually use the the vs code terminal here we'll run build and that's just so that i don't have to all tab and you can see it so it's run and you can see it's still just watching files for updates now let's uh we back here we type this in with a lowercase and let's just change it to an uppercase very minor change save that you can see it recompiled that file pretty cool right and uh we could go find that if we were you know we don't believe it oh well it's right there nice wizard rapplin all uppercase so there you go now let's take a step further though what we can do is say we actually want to start up our own little server here so we'll make a dev server property here and that has a content base and you got to tell it like where to look for your stuff and we would tell look in that dis directory all right because that's the default here right and from that point on we need to actually shut this down here and i guess i could do it there but what we want is to add another thing webpack dev server so this nice little package will make it to where we can actually open up a server instead of just opening that file and refreshing it we can have uh sort of the normal what you would expect like hot reloading server here and then it keeps all of our changes kind of in memory so they update immediately in order to enable that what we want is a script here and let's add a start script at the front and the start script is going to run webpack dash dash serve actually i think it's just serve yeah it is served i'm being silly and that's all we want to run now and then what we can do is go back to our terminal and say npm start and notice that we got this nice little server here project is running so let's see if that works if we go over to our browser we can almost put that in this right here that i have open this up console and we still get this uh oh wait failed to load resource this is different than i thought the server responded with a status of 404 not found weird okay i had to reload okay live reloading enabled cool okay so here's all that stuff and then let's go back to our code and say all right well um you know at the top of this i'm going to say console.log get classes was called why didn't i put that together as a function i don't know who cares get classes was called boom just like that live reloading so now you've got a nice little server to simulate development um it's all going through this index.html which is like what your actual thing would uh load your browser and at this stage you can actually host this if you want to you could put on netlifi or any other cdn or anything like that it's just a series of files and you can actually because you have a build script you can just tell if you use something like nullify you can tell it you know every time i push for a continuous integration to my repo i want you to run the build command and then that will output to the dist folder and by default it's going to you just tell it that that's your entry point dist or public or whatever you want and it will serve up some files and and you have a site at this point pretty cool with some cool developer experience now um what i want to do just for a moment is just show you that typically you're going to see in your webpack config one little extra rule here and i did it this way on purpose because i want to show you that you actually don't need this if you just want to use the default settings for source and dist but what you can do is you can have an entry point here and for that entry point we want to say we want to give it the relative path so this is the entry to our index js file and so well any file actually doesn't have to be index but we're going to say it's index because that's what it is and then i want to say well our output a place and let's put a comma there just to get rid of that we need to do pass it an option which has like the file name and so that's what we want to call it so let's say instead of main.js we want to call it bundle.js for whatever reason you know maybe we have a reason and then we need to give it a path now this one's a little bit weird um i'm actually not sure why we can't use relative pass in this place we need to use path resolve and use durname and pass it whatever folder we want let's make a different folder let's make public so we've got a different name bundle.js and then we've got a public folder now a little bit information about this path is something that comes with node so we can just do const require or const path equals require path and then we'll have that no big deal there we don't have to install another package or anything like that and this dur name is also something that comes with node now what durname is going to do is it's going to find the directory or find the the file that you're currently at this directory name of the file you're in in our case this is root now path actually requires a relative or an absolute path sorry and because of that that's why we have to do path.resolve to give it that absolute path i suppose we could type it in ourself the main reason you typically do stuff like this is because on different operating systems you have different ways of you know creating the string for a path and due to that there will be some inconsistencies that you just hard coding it can't work the thing that i was kind of curious on is why does entry not need that i'm guessing it's a read write thing but i don't know so this is just the way that you do it is shut the server down start it back up again and we should see content not from web package or from dist oh that's actually because our server we haven't changed that over yet but i'm imagining it did compile our other stuff let's see we should have a public no let's change dev server to well actually let's just run build maybe or say the content base is public now npm run build all right here we go so we've got public bundle.js a bundle.js map and so yeah you can see that working so if you just need to change your name for whatever reason you can you can totally just leave that off though if you don't it's up to you it depends on how complex your your setup is going to get right so i just want to show you that because you'll almost always see a webpack config with an entry and an output and sometimes it's more complex because you want to do chunking or you want to do it in different things but if you have a simple setup like this you don't even need to put it it's pretty sweet that it just comes without that or comes with that setup and you don't need that so uh i think what we want to do now is make this sort of actually a production dev type scenario because we really don't want this hard flag here for development uh just hard-coded right there because we want to serve the minified assets to you know our actual users so what we'll do to do that is we'll say hey um when you do start i want you to do you know webpack serve or whatever but when we do build we're going to set an environment variable you can do this multiple ways and we're going to set that to production okay and so node e and v is a pretty common thing that would be used here and then what we can do is we can create a variable and say const mode equals and let's do something like um process dot env dot node env so that we can get any of our environment variables and we're looking for the node environment variable we'll say is that equal to production here's a ternary well then this is this variable will be set to production otherwise it will be set to development and then here we can actually change this and we don't want the string here we want the variable to mode and we could do the shorthand here but we'll just keep it like this so mode mode all right now let's see if that actually worked we go back to our terminal here and we do npm run build now it should still start up in watch mode but what we should see is that the main actually we changed that didn't we we've got all sorts of nonsense going on here you'd want to pick one or the other obviously but we now notice that bundle js is bundled in a lovely way and it's all minified and mangled and all that good stuff so that's pretty sweet now you could obviously you can use these variables to do other things too like if for some reason you want a different output directories or all that type of stuff you know you can you can see kind of the customization that you can do here with just this this idea now to test this out and make sure that we can still get you know our dev files what we would want to do is uh go to let's let's just say that we will make a little silly script here that's like build dev just for whatever reason and we can do webpack uh watch and then now if we go over to our terminal here we'll do uh clear that npm run build dev okay so it's built everything it's watching and if we go to our bundle you'll see that it's now in development mode it's not minified and it's got lots of fun things and the thing that might kind of throw you off a little bit is that um let's actually do this if i do npm uh npm build run build sorry and that will output my minified version and then after that i do you know let's say i switched over to start because i wanted to serve you might expect this serve because we're not passing the node environment production to it let me show you that for reference this one right here webpack serve we're not passing this flag to it so it should be in dev mode and if we go and look at our bundle js you'll notice it's still minified which is kind of confusing but that's because in serve mode it's actually not writing to that file like i said it's keeping it in memory so that's why uh you know that isn't changing over but as you can see the flag is working correctly if for some reason we needed to build between dev and production you could just leave it as production or take it off all right and with that you're pretty much set with the es6 plus you know uh all the features es6789 whatever we're currently at when you watch this video and uh i mean it's funny to even call it es6 plus because at this point es6 is so old it's just like old timer logic but there was a time when you know we couldn't use any of that stuff and that's when babel came and saved the day so the thing that you should know that's very important with this setup right now is that this does not include proposed features so you might see a new javascript feature that's being proposed currently and if it's not in the you know the current stable versions that are out then babel is not going to transpile that until you opt into it specifically i'm not going to show how to do that in this video because i would make it run a little bit longer than the intended purpose but just know that and there's one other thing that you need to know and that's methods this will confuse people quite a bit is that you might think that you're automatically going to get method support for um i'll give you a quick example so let's say if we were to console.log after this we have an array that we just make on the fly a b c why do arrays always have three items i don't know it's weird um for demo purposes and let's say we want to do the dot includes method hey do you uh do you include b well uh this was es7 if i recall correctly and we will not get that transpiled you might think that we would but we will not by default from babel why because it's a method that's very important that requires a polyfill and to show you that just that that's kind of not working what i'm going to do is i'm going to switch back to dist being the main so i'm going to delete this like public nonsense here we're going to go back to our config and clean this up and we're going to say um you know i don't really care about these anymore so we don't need an entry in an output you know some people might prefer to always have it but for my purposes we don't in fact let's actually use start just so we've got our server running here and if we go back to the browser let's do this couldn't see it because it couldn't be reached there we go okay cannot get root why what's your deal buddy do i need to reload again oh you know what haha we got got here that's because this was pointed at public so now you know why you need that so i'll leave that in uh you do need to make sure this is pointing to the right direction right content base so now that's starting back up again there we go beautiful okay so you'll see that this was true i should have put a string in front of it but it came right after the object so that's all there is to it now this might seem like you're good to go this is a real gotcha that's just because this is a modern browser and it does already support that okay now if we were to go to our code of where this thing runs uh i actually don't want the source map in this instance let's just do a uh includes search close this see how the syntax is still here console.log abc and includes it did not try to transpile that to an older one and that's because by default mabel's not going to do that for any methods that require polyfills there's a kind of a larger discussion about that but the gist is that it would bloat up your uh and your end result of your main.js significantly to just polyfill all of the methods it's quite significant and you don't want that by default a lot of people get tripped up on this because they think oh you know preset emv i should just be good to go why is ie 11 failing when it tries to run this dot method that's why now if you're interested in getting those polyfills to work and seeing what you need to do to get all of your code transpiling forward say ie11 for instance this is probably a good opportunity to subscribe and maybe check notifications because i'm going to be coming out with a video sometime relatively soon that will include a little more in-depth dive of all that transpiling goodness to kind of take a look at what you need to do to get all of your you know methods and everything working on older ones we're going to talk about like browser lists and stuff like that so you can kind of narrow down your focus and say these are the browsers that my particular product needs to support so if you're also interested in let's say react jsx trying to get that going so that you've got you know your own kind of custom web pack setup that simulates a lot of the behavior of create react app but you're going to want to you know add more customization i'm also going to do a real quick build video of that in the near future so same thing if you're interested in that subscribe and you know please give me any feedback if you liked or didn't like the pace of this video if there was different information that you wanted you know leave a comment and i assure you i'll be listening so i will see you on the next one you

Channel: Swashbuckling with Code

Views: 35,262

Keywords: webpack, webpack 5, transpiling, babel

Id: X1nxTjVDYdQ

Length: 41min 49sec (2509 seconds)

Published: Sat Nov 14 2020