Coding

BASIC BABEL + SCSS WORKFLOW | Webpack 2 Basics Tutorial

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