THE WEBPACK CORE CONCEPTS | Webpack 2 Basics Tutorial

welcome back to this series about webpack in the previous videos we learned what web neg is and how to set up the development server now I want to dive into the core concept behind WebEx super important to understand we have four core concepts when using webpack or on which web page builds up on you could say web site always needs an entry point where should it start looking for dependencies and that can be multiple entry points as you will learn but it needs to have some entry point some clue on where it should start its journey it also needs to have an output and we use both entry and output here in our very basic usage where should it store the bundle or if you have multiple entry points the bundles then it will create multiple bundles one for each entry point and then you have two other things we don't see here which you will see in this video here though we have modules with loaders which allow us to transform our code and we have plugins which do kind of the same but on a different different level and you will understand the difference in this video let's get started by creating a config file thus far we ran all our website commands directly in the command line and it was fine until now but for a more detailed configuration we need a config file we added in the root folder the web pack config dot J's file and you can name it anything you like you will then have to specify the name of your config file in the command line though or if you use exactly this file name and website will pick it up automatically so if you added this file needs to have a certain structure it needs to export a JavaScript object which holds the web pack configuration and you use the node J as export syntax for this so you define a module and then use the exports keyword which you assign a JavaScript object the configuration object as a value now this JavaScript object has some basic things it needs to contain first of all we need to have entry where should we start the journey and as I said the entry you can have multiple formats it could be an array of multiple entry points it can be a JavaScript object where you map aliases to different entry points or here to start simple you simply reference one single file as a string though so here you could say dot slash source slash JavaScript slash app such as is my entry point here the same path as we use here in the package.json file and of course this path specified here in the config file has to be seen relative from the config file from the root of your project so now we tell web pack where to start we now need to tell it where to finish what you produce so in X as the output here output is a JavaScript object where we configure what the output should look like here again we do have different levels of detail the most basic form of defining the output is to tell webmix where to store it and then what to name it so we can add the path property here and these property names here of course are all kind of reserved these are names webpack will recognize and to make super clear that website it identifies us correctly we can use a node.js feature we can import the path package with required path this is available since you install node chairs on your machine and the path package a core node.js package simply gives you some utility functions which help you resolve the correct path so here you can now call the resolve method on this path package and as a first parameter you can pass underscore underscore dur name that is a reserved variable name you didn't define it anywhere right but it is available it is made available to you which simply indicates hey the current directory and then the second argument is the subdirectory you want to go to like gist a folder which should get created we don't have it yet and now why do we use this path results method because the output power needs to be an absolute pause so we can't define it like in the entry property whether you have a relative pop seen from our weapon context file on here we really need to have a an absolute path because webpack needs to write something there it needs to create a file for us there and the path result method resolve such an absolute top gift as an absolute path with the given inputs so that is where to store it now we also need to define the file name so how it should web nickname this file it creates and oftentimes you'll see bundled chess here though you're not limited to the names you can use any name you like of course but bandolce is clearly indicates that your code got bundled which is why it is a popular name so these are the two basic features we already used now before going into loaders and modules and plugins let me adjust our scripts I will remove entry and output file name here on the web pack - server and do the same for the website command I will leave the - P here though so now let's test both let's run npm run build prod first and see if that's the works looks good it's still created - this bundle chase file now I'm going to delete this file and I'll run NPM run build our development server also seems to work if we now revisit our webpage and reload it well somehow we now get an error here that is something we'll have to look at you but our main script the production script is working so it seems to have picked up where to get the files and the web pick dev server kind of seems to have picked it up but but not entirely there is something wrong with it why does our development server not like this setup well before where you pass the full filename with output filename remember that there if I temporarily revert this we specify the full path well now in our config file we split this up into a separate path and file name declaration so now out the webpack development server will only look for the file name and some who ignore the past year so to tell the web pack development server where this lives we have to add another property to our output here the public path which basically specifies well where are the assets to be found at and by default this is just slash but this is not correct because we know it will be in the dist folder and it doesn't pick this up automatically so we simply add this here slash dist and if we now restart the web pack dev server and reload our project you see the error message is gone and if I click the button it works again so now we fix this queue now the output is finished and both our normal web pack command as well as you set web server like it that's entry and output and again you can go into more detail here we will see more configurations throughout this series but let's first dive into the next core feature modules and loaders that is one feature area what is that modules and loaders allow us to transform our files and a good example with the our CSS files which we have used right now we still import them the conventional way here in our index.html file now you could say it would be nice if you could for one import the CSS file into the JavaScript file which sounds really weird but keep in mind it's only about informing web tech that we want to import this file we're not really mixing it with JavaScript we only want to make sure that it also gets loaded by web pack so that would be one thing and the second interesting thing would be to then while when website has this information that it should load these files well it can't add CSS to our JavaScript code so it would be nice if it could simply output it for us in the head section of our index.html file here and for that we need loaders we need modules which Judith transformation for us which enable us to load CSS in JavaScript and which then automatically added to the index.html now to get such loaders I will quit quit this process with ctrl C and then with npm install' we can install them now there are loads of modules and loaders you can use in web pack and you can simply google for the feature you're looking for typescript compilation yeah six compilation plus web pack and you should find the appropriate loader for DCSS use case here what we need is we need the CSS loader and the style loader these are also development dependencies so let's mark them as such and now it will get downloaded and added to our project you can see now in the package to JSON file here and now we can add them to our config and we have to tell weapon please take these loaders into account when analyzing our files now dis is super easy to do we have to add a module property here which is a JavaScript object and here you can simply configure how weapons should treat your modules now what is a module a module basically is every import you have like here the Dom loader file here these two variables these are modules because we export them and we import them here and our CSS files all the cookie modules that we want to import them so it would be nice if in our app such as file let's say right at the start we could write import go up one folder CSS and then main dot CSS that would be awesome and thereafter we also want to import the input element CSS file and of course you could even add more loaders which allow you to write fast code and nest your CSS code in each other and much more but it would be nice if you could use this basic syntax to begin with and with that added now these two are all the modules so that is what we configure here and now first of all we want to set up the rules for these modules so how should they be treated rules is in array of rules you guessed it and each rule complete the JavaScript object now each rule has a certain structure there are some properties you can set up but some you will need to set up for example to test property which means how does webpack know if this rules with this rule here the specific rule applies it tests the file extension because you probably have the same rules for the same files so for example if we and this is a regular expression here if we have a JavaScript file and your regular expression for this is backslash dot J as dollar to indicate it's any file name but it should end with JavaScript if we have a JavaScript file then we want to apply a certain loader that's the next property we're here we tested something now we add loader now the loader for the JavaScript file here is no loader because we don't transform our JavaScript code as of now so we probably don't need a rule for JavaScript but one for CSS file so let's change the extension to CSS and here I actually want to apply more than one loader now loader would simply take the loader as a name like CSS loader but that would only enable us to add the CSS code to to import it in JavaScript now if we run it like this let's run our build script the WebP egg dev server you see that this works but if I reload it here you see that this works but if I now go to the index.html file and comment out these two conventional imports here and I now rerun the server and load my file again you see all the Styles are gone because we didn't get an error so somehow it was able to handle our import statements here but it also didn't add these styles and of course it's cons because it can't add them to the JavaScript file so we need an average the Styles weapon is aware of an atom to the index.html file this is why one loader alone won't do here instead won't use loader like this we will use the use property which allows us to simply add multiple loaders here we add an array therefore and now we specify all the loaders you want to use and additionally you can also specify options here but that is something more advanced let's pick two loaders no important is the order here you could think that you start with the loader you want to apply first CSS loader and then the other one style loader which is responsible for taking the CSS code and adding it to the Dom a to your head section to be precise if we run those now you see we get an error the reason for this is that it's not able to handle these CSS imports it's the same error you would get if you comment out all that module part and run it right now but it's not able to handle up these imports in the apt of chance file instead what we should do here is we should reverse the order here so first lo - style outer den CSS because that super important actually web pack will execute your loaders in reverse order so the last element in this array gets loaded or gets gets applied you could say first so it will first use the CSS loader which is the loader we need to make it understand these imports and then it will add this style loader so now with this setup if I now run this command you see now it's working fine and if we go back to our running web page you see now I can reload it and I do see a working set up again with the code working or DB styling working the way it should work this is how you add loaders and how you configure how epics should treat your modules one of the cool features and super important and one of the main reasons why why Pegg is so popular because there are loaders for all kinds of things compiling typescript es6 code says as CSS much much more simply google around a bit and you will find a lot of use cases now let's dive into the last chord feature plugin what are plugins plugins are almost the same as loaders you could say and then again they are really there red loaders are applied on a per file basis so here we check for CSS files and then on every CSS file we use we apply these loaders to transform the code or load it correctly a plugin is then applied on your bundle before it is output you could say so if you have some transformation you want to apply to your whole code a plug-in is what you're looking for and a typical plug-in you would use is the minification plugin now of course we already can mini 5 by adding - p here and that uses this plugin indeed behind the scenes but if you want to really configure this specific plugin in all detail possible or add another plugin you will need to add the plug-in array here because you can add multiple plugins obviously now which plugin can be used here I will deal with that minification plug-in so I will simply need to import web tag for this so what do you require syntax here from web pack and any plugins array here I can now simply add new new keyword is important we need to instantiate it web pack whoops not like a method list though optimize so call optimize here and then the ugly 5ks plugin here you can pass options in a JavaScript object and this is why this might be preferable to executing it with - P you can now dive deeper into this and simply Google this plugin if you want you know all these options you have for example we could disable warnings we could turn mangling on or off which is a more aggressive form of manipulation and so on here I won't pass any but of course you could do that if I now restart my web site development server we should see a difference though if we reload the page it still does work but now if we inspect the source code you see it's minified here q and it wasn't before when we use the development server you can also see it on the network if you reload this you see that the bundles now shrank before it was around 300 kilobytes now smaller because we minified it so this is how we can add plugins the fourth and loss of the cool features of webpage so that is our finished configuration file now and that were the four core concepts of web pack the entry point where to start the output where to end what you create and in between during this journey we also have modules and what you do with them and module rules so what should you do with each individual file you load and then we have plugins right before we create the bundle what should you do with the prepared code with the overall code should you minify it should you do something else with it for example there are plugins which allow you to outsource your CSS code into separate style sheets things like these these are the core concepts that is how web pack works and in the next which is off this series we're going to have a closer look at some default use cases what you do with web pack using different loaders some common setups and things like these all right into the comment section what you would like to see a con promise that I will cover it all but definitely interesting to read that and I'll do my best to show some of the things you request there so see you in the other videos bye

Channel: Academind

Views: 109,774

Keywords: webpack, webpack2, webpack 2, tutorial, module, loader, loaders, plugins, entry, output

Id: 8DDVr6wjJzQ

Length: 19min 17sec (1157 seconds)

Published: Mon Mar 27 2017