1 00:00:02,310 --> 00:00:07,230 So now we got the webpack basics set up, we're able to create our output here. 2 00:00:07,380 --> 00:00:13,420 Now what we don't have is that development server that would automatically reload whenever we change 3 00:00:13,420 --> 00:00:19,650 something and that would be nice to have. For that, we have to install an extra package with npm install 4 00:00:19,650 --> 00:00:21,570 --save-dev 5 00:00:21,900 --> 00:00:30,030 and that's webpack-dev-server. Hit enter and install this package, again locally into this 6 00:00:30,030 --> 00:00:32,260 project as a development dependency 7 00:00:32,460 --> 00:00:40,320 and we can then use this dev server to serve our application. For that let's go to webpack.config.js 8 00:00:40,430 --> 00:00:47,360 file and there, maybe after output, you can add a dev server entry, the exact order of configuration 9 00:00:47,360 --> 00:00:48,010 options here 10 00:00:48,020 --> 00:00:55,110 doesn't matter by the way and dev server can be an object where you set a content base key. 11 00:00:55,110 --> 00:01:02,500 This tells dev server where your root HTML file can be found and here, 12 00:01:02,520 --> 00:01:07,610 that's just ./, it's the same folder as the config file, therefore you actually also can omit 13 00:01:07,620 --> 00:01:09,920 this setting here altogether, 14 00:01:09,930 --> 00:01:15,160 it will just work because that will be the default anyways. 15 00:01:15,270 --> 00:01:20,700 So now to use that dev server, we can go to package.json and tweak our script, 16 00:01:20,700 --> 00:01:22,650 we got the build script here, 17 00:01:22,680 --> 00:01:28,340 now let's also add a build: dev script 18 00:01:28,340 --> 00:01:31,340 maybe, you can again name this however you want 19 00:01:31,540 --> 00:01:39,760 and there, we run webpack-dev-server, like this 20 00:01:39,940 --> 00:01:45,650 and this again will take our webpack config into account and will do all the webpack things but it 21 00:01:45,710 --> 00:01:49,850 also launches that development server that's tied to the output. 22 00:01:49,850 --> 00:01:53,600 So if we now run npm run build: dev here, 23 00:01:53,600 --> 00:01:58,820 it should spin up that development server and still do our build but now this is a process which 24 00:01:58,820 --> 00:02:03,860 keeps on running and you should keep this running until you are done for the day, at which point you 25 00:02:03,860 --> 00:02:08,930 can always quit it with control c and then you can always restart it by executing that command again. 26 00:02:09,410 --> 00:02:16,010 As long as it is running, it watches for changes in your entry file or in any file associated with that 27 00:02:16,460 --> 00:02:19,310 and it will rebuild whenever you do change something there. 28 00:02:19,520 --> 00:02:23,630 You can visit your page on this address which it outputs up there, 29 00:02:23,630 --> 00:02:30,290 in my case localhost:8080 and therefore now if I enter this here, I got the same running project. 30 00:02:30,290 --> 00:02:37,880 Now let me show you that live reload which I meant, if I go into let's say the project list file here 31 00:02:38,450 --> 00:02:44,750 and I comment out this console log and save, you see it recompiles, it did find out that project list 32 00:02:44,750 --> 00:02:48,770 changed and it also reloaded the page here. 33 00:02:48,770 --> 00:02:54,020 Now how do I know that it reloaded the page? Because the console here has a new output different from 34 00:02:54,020 --> 00:02:59,020 before, it's not printing the output from my project list from line 25 anymore, 35 00:02:59,020 --> 00:03:01,130 that's not happening as you see here. 36 00:03:01,220 --> 00:03:06,920 Now of course we don't need serve anymore but instead we can just use this webpack dev server which automatically 37 00:03:06,920 --> 00:03:11,720 rebuilds whenever we change something and which therefore of course gives us a very convenient development 38 00:03:11,720 --> 00:03:12,470 experience.