BASIC BABEL + SCSS WORKFLOW | Webpack 2 Basics Tutorial

welcome to this video in this video we're going to build a basic workflow compiling es6 code with able to use five code so that it runs in all browsers and compiling s CSS which is a superset to CSS Q CSS code so that it also runs in the browser so that was developing we can use more features features which make our developers life easier using es6 features using s CSS which really enhances the way you write your CSS code makes it more fun to write it code a bit easier gives you more features and we still get an app at the end which runs in all browsers because we compile everything to code which can be parsed which can be understood by all browsers as mentioned we're going to use webpack for that and if you're brand new to web pack you check out the other videos I made about it here on my channel where I explain the basics to core concepts on how to get started I assume that you have that basic knowledge in this video now here's the starting project we're starting with and in the video description you'll find a link to a get up repository where you can follow to find this Grunch holding this starting project here so let's start and of course since you want to use webpack we need install it the first step is to therefore initialize this project with NPM notes package manager which you will use to manage all the dependencies in this project before doing so though let me quickly walk you through the project we of course have our index.html file here and there we have a couple of buttons in a paragraph we don't have any imports neither a script nor a CSS import as you can tell and then we got our CSS and JavaScript folder in the source folder in the CSS folder we're using a CSS though we got this colors variable where we define some colors and store them in variables just as varial file holds these variables that's the SCS as future variables if you want to learn more about s CSS simply google for sass which is the underlying language you could say to learn which features you may use there and then the main go to a CSS file I'm using these variables to basically get the buttons in the index.html file them some stylings because the buttons will have these IDs attached to them in the JavaScript folder we get the app.js file where i get references to some dom elements like the paragraph in the buttons and then we have some functions which i want to execute here I use ventilators to execute them I use es6 arrow functions here I always cons which is a es6 feature and I when I use the random generator which is not a built-in JavaScript object or class instead it's my own class you find here in the random generator or JavaScript file so here I'm using another es6 feature class and export that's the thing we're starting with now as I mentioned let's initialize this project with NPM to be able to install some dependencies for that I will run NPM in it and so that I don't have to answer all these questions I will run - Y which will answer them all with yes this will give me a package of JSON file it contains some things I don't want to have here don't need that so that's the basic file I'm going to go with that setup here maybe put my name in here of course that's purely optional and up to you and with that setup I can now use NPM to install some things so I will use NPM install to of course start with web pack so let's NPM install web pack and let's all the graph you web dev server I also created a video about that and this server will be used to can see our application run while we develop it so I want to use webpack and web pack dev server and I'll also store and enter the package.json file by putting - - safe depth behind the npm install command this will pull down the file CDG packages and give me an entry in the package of JSON file now while students running we can already create the web pack config files a web config dot j s this is the file where we will configure our web pack workflow and as you learned it in my other videos we will use module exports to export our configuration a Java Script object and there we got some basic building blocks at least we need an entry and the output element so that we can tell weapon where to start and what you create so let's start with entry and I want to start with the fjs file this should be where weapon starts analyzing my project because this will later be where I put all my imports so let's reference it as a relative path seen from the config file on dot slash then the source folder and then it's in the JavaScript folder the app dot J's file and this will be what WebEx starts analyzing a project since starts there this is where we should use some imports and we need them anyways if we have a look at the app such as fall we're not importing the random generator we are exporting in this file so let's add import at the top I'm going to use a es6 import which is supported by web pick by default even if you're not installing a es6 transpiler as we will do so that we can also compile the rest of this code which will not be supported by web tech out of the box so let's import from our random generator file which lives in the same folder and we don't need to put the file extension there because dot JavaScript is extension automatically detected by web pack and you don't want to import the random generator class that's one thing we also need to take care about the s CSS code here in the main dot s CSS file I need to import my color variables and we can do this by using at import s CSS feature and then referencing colors like that this will grab our colors file and imported and added to this a CSS file so that is a CSS code up here now with that added we also need to import the main dot s CSS file into our javascript file and whilst it might sound strange to import CSS or s CSS into JavaScript this is just how wet eggless works and it will not put the code into the javascript file in the end of course you can't mix it like this but it will start analyzing it and if it then hits these CSS files or a CSS file we just need to ensure that we installed the right loaders so the epic is able to actually pull out the s CSS or CSS code and then put it somewhere else for example into the head of Paige and you learned this in my other videos too so let's make sure to go to the app touch s file and at the top I also want to add an import here using the JavaScript import syntax pointing to my CSS folder and then we may not a CSS file like this this will make sure that I also import this file and that web pick will find it was it analyzes my code because keep in mind after chess is my starting point so it is there what we need to reference all the files you want to web tech to take care about so that's the entry part now we want to create something so we need an output here - an output is a JavaScript object where we define the path and then the file name the pop should be an absolute path and for that we can use a little note j/s package to help us a package you automatically have if you installed no chairs as you did otherwise you wouldn't use npm this is the path package and we install it by using required path like this so that is our import of the path package and we can then use it and there specifically you resolve method to create an absolute path using a helper variable we have available here - - underscore underscore dur name which gives us simply the current directory but it gives us an absolute path to that directory and then well the folder we want to store our thousand and that would be the dist folder which does not exist as of now but which will be try it created dynamically so that's the path the file name should be bundle dot j s for JavaScript code will take care about the CSS part later with a specific loader or plugin to be precise so this is where we will store it what what do you want what we want to create right that's nice but right now it would it would not really work if we create a script in the package to JSON file let's name it built and all we do there is we run web pack def server like this let's find out what happens if I now run npm run bolt so if i now execute the script you see a gets us an error and if we broaden this if we just make this a bit wider we see that it can't handle the import syntax in the SPSS file because it doesn't understand scss and that makes sense because we we installed no help for web pack by default it doesn't understand SPSS we need a loader for that we need a couple of loaders to be precise because once it will understand es6 our browser wouldn't or at least not all browsers would so we also need to transpile the es6 code and that is why you're watching this video anyways right so let's make sure we install all the loaders and libraries we need to successfully compiled our code I'm going to use NPM install again and here for scss I need T SAS loader because SCS SPN uses says this will kind of translate SPSS to something well to CSS in the end SAS loader needs node sets which is a package which in the end dusty translation says loader only to plug in or what we put into web pack to enable web pack to do so and besides the SAS loader I then also need to CSS loader to do something with the CSS we get because CSS is nice but we still can't handle this in JavaScript and now we could use the style loader to inject that CSS into the head of our page and I showed this in other videos but here I actually don't want to do this instead I will use some plugin the extract text web pack plug-in a very short name which will allow us to get all the compiled CSS code and put it into its own file so that we can import a separate file holding our CSS code which make sure that it doesn't depend on JavaScript getting loaded because if you use the other approach well in the end it will get injected into the head part of your section as soon as your JavaScript code was loaded in the running page if for some reason JavaScript was turned off or and executes successfully this page will have no styling to therefore this is the approach which decouples to two things so that's taken care about the s CSS in CSS part but we're also using es6 and as mentioned webpack understands es6 but it doesn't compile it to es5 so the browser or older browsers Internet Explorer obviously won't be able to handle it therefore we need to compile es6 and for that we're going to use Babel which is a transpiler doing that we need to install Babel core which is basically doing the translation Geordie transpiling I should say then we also need Babel loader just like with nodes s and the sass loader one does the actual job and the other plucks it into our web Peck flow Babel loader does letter it connects it to web pack and we also need to install some rules because Babel core by default is able to do the translation but we need to tell it hey which features do you want to be able to compile for that we're going to install a preset and there are loads of different presets like you can use I will excuse the Babel preset es2015 which will unlock all the year six features basically so datas the preset that is the loader and that is payable core and the same for sass now with that I will add - - safe def to also store some references in the package.json file and just will now download everything create entries new package to JSON file and then we can continue tweaking our webpage config file to use all these features to use all these loaders and so on so now that it's finished I can go back to my web tech file and obviously we want to do something with the module so with our files now here as you learn in the other widgets we set up some rules which is an array of rules and there we simply have rules where each rule is a JavaScript object now we want to test something so test when this specific rule this JavaScript object should apply test takes a regular expression and I want to test for the file extension here beginning with JavaScript so all JavaScript files should in the end be compiled two years five so I test for javascript falls and then I want to use something that is an array and here I specify all the loaders that want to use now the short syntax is to just specify babel loader here like this just a string in this array and it could have multiple loaders the problem is are also want to configure this loader because babel loader by default almost does the job but what else did we install well our preset and I need to tell beta loader which preset to use we only have one but the beta loader doesn't know that so I will not use this shortcut instead the longer version where I pass a JavaScript object to this array then I define the loader key where it's a babel loader so that is what we could have done with the shortcut but i'll define an average key and that is options and this allows me to configure this loader and of course this is available for pretty much any loader of course you need to check out the options to specific loader offers which can find any documentation of the loader so here in options that's an average javascript object and we could define a couple of things about the bay loader and check its documentation to learn what you can configure i'm interested in defining the presets i'm going to use and that is an array and here i only have one es2015 but you could have more presets to unlock more features of es7 for example already that is our babel loader transpiling our javascript code and that is all the rules i want to set up for javascript I will add another rule though of course this one being responsible for s CSS now here I will also test and as I just mentioned I want to test for s CSS files so we'll check for the a CSS file extension with this regular expression I then will also use something and now here I will not just define my loaders in an array the reason for this is that I want to extract my compiled CSS file a code into a separate file so just running the code through the loaders doesn't do the trick I need to use the plug-in we installed this here this extract text web pack plug-in now correctly you could say yeah what's your earlier videos we have that plug-in property we can define so after module here and you're right and we will use it but this plug-in also needs to know what it should extract and that what should I extract part is actually find here in our rules first of all I need to install the plugin down so here I will fetch the extract text plug-in by using require and then extract text web pick plug-in so it is very short plug-in aim we installed and then I will configure it a little bit more I will name it extract plug-in here - now instantiate it basically with some configuration and in this configuration you well can configure some things about the plug-in again search the official documentation by googling the plug-in the thing I'm interested in is configuring the file name because as a Cal told you this plug-in will take our CSS code and put it into a separate file well obviously we need to tell it how to name that file so I will name it main dot CSS but of course this file name is totally up to you with that configured we can go down and back to this CSS rule here in use I will use extract plug-in the variable we defined here which holds our initialized extract plug-in and I will call the extract method cutis extract method I now pass a JavaScript object and in here I now again define use and that is we're now set up to loaders so that's just a pattern used by this plugin that you use it in a rule in the US section and then you wrap the loaders you want to use in the end that's just a pattern you can remember for this plug-in here and of course this is all the explained in the documentation of this plug-in so here we get two loaders and since I won't configure these loaders in any way I can again use the shortcut of just having a couple of strings here in this array so I will use the CSS loader but first I want to run it through the FCSS loader and keep in mind I told you that this array is parsed from n to start so the last element in this array is the first loader which gets applied that's just how web peg works so we first parse the SPSS code and trans Paulo to CSS and then CSS would still not be able to be handled in a JavaScript file and remember we do import it into a JavaScript file in the end then we need to CSS loader so that weapon is also able to import CSS into JavaScript as mentioned before it doesn't really add it to the JavaScript file but at least it understands what this import means and since we wrapped us all in the extract like in this will now come in and pick up the kampala CSS code and put it into the separate file to be precise it almost does this here we simply tell the plug-in what to extract but you really use it we need to use that plug-ins property we also define in our config object itself plugins as an array and we define all the plugins we want to run our final code through and of course we want to use the extract like it just like that just a reference to this or just this variable we instead really initialized here and this will now pick up the configuration from above and then here what we wrap with it and at the end we'll take all the pieces it has all the information has to put them together and store our CSS code in that separate file and as our finished config file now would be nice seeing that in action wouldn't it so do you see it in action there's one more thing I need to do for the web pack dev server since our index.html file is in the root folder and our compiled files will live in a distal der since that is what we define here I need to add one other property in the output and that's the public pop where I say that the files will be in a dist folder I do set up to pop up here but that's an absolute path now here I need to set up the relative path or the path as seen from the index.html file on so that the web pack dev server knows where to look for these for these elements basically so that is all the setup I need now to also see something of course we need to change our index HTML file because right now we're not importing anything we know that at the end we will have two files we will have a bundle dot J's file for the JavaScript code and the main dot CSS file for the CSS code both will be placed in the dist folder so in the NX HTML file I'll be able to import that by simply adding a link here where I want to reference this folder and then main dot CSS and at the bottom to page a script import where I will reference this bundle dot J s these are the two things that when a import now with that in place let's rerun and Cameron build and see if this now works and I do get an error because I made a mistake it's of course not called s CSS loader it's called SAS loader and you could have fully figured it out by having a look at the package to Jason felt so little mistake on my side let's restartable process nice to see that it's tiny things like these which fail in the end this looks better now let's go to the URL or web pick dev server is running at your localhost 8080 and if we go there we see a running application styling seems to work and if I click on that I indeed create a random number switch output below so that seems to work if we open the console we also don't see an error also not upon reloading and therefore our compilation and the loading of the files seems to be successful now as a final step I also want to build this for production and of course you can always tweak all these things but we will dive deeper into more advanced setups in the future for now I'll simply add a build prod script here where it will execute just web pack not the dev server because I don't want to host them on a server I really want to get the artifacts which I can do by neck area which I can deploy web pack - P will build for production and also minify the code again you can tweak this all even more to control how minification happens and so on so we're running NPM bolt prot I now create a dist folder in this root folder here it is and there we get a bundle Dodgers file and a main dot CSS file and as you can tell this is magnified as is really compact and now if you were to deploy that in a disk folder and the index.html file in the folder above this of course you can also treat this workflow to have it all in the image in the disc falter and we will do this in the future but this would tell you deploy it right now and with that you get a finished basic workflow using es6 and a CSS and hopefully seeing all these things come together and how web tech works now as mentioned this is a workflow we can still tweak and which we will probably do in future videos you also have the index.html file in the dist folder maybe to use tree-shaking a feature I will explain in the future and now with it all finished let me finally go through what we're doing here step by step again so that it is really super clear if you already understand everything you will of course already leave the video and I hopefully see you back in our videos now let's see what's happening here we had a app touch chest file at the beginning and we have the random generator as file which we import in the app shares form and then we had some F CSS files we also imported main dot s CSS in the app shares file we imported the colors as CSS file the main CSS file and now we want to use webpack so how does web pack well go through our files how does the flow look like we could say we have two different processes here because we have a SCSS build process and that javascript build process of course the end hand by web peg in one file but these are two different rules we apply so let's start with the JavaScript process we use the babel loader to transpile es6 to es5 and babel loader uses some rules as you learn some presets yes 2015 preset that's nice in the end this will result on a bundle or chase vowel the SCSS workflow is a bit more complicated here we first use the sass loader to compile a CSS fast to CSS but CSS still can't be handled by JavaScript so we need to CSS loader to tell web pack it's fine this import is okay this is just a CSS file which I will handle somehow then we could handle it with key style loader to inject it into the head of our page but instead here we used to extract text plug-in to extract it into its own file into its own CSS file which in the end will result and the main dot CSS file and this is how you could depict the process we created in the last minutes in this video and with that it's hopefully super clear how that all works now I'm really looking forward to type deeper into epic together with you and future videos have a great time bye

Channel: Academind

Views: 87,506

Keywords: webpack2, webpack, webpack 2, tutorial, babel, babel-loader, scss, sass-loader

Id: 8vnkM8JgjpU

Length: 25min 10sec (1510 seconds)

Published: Thu Mar 30 2017