1
00:00:02,610 --> 00:00:08,730
Now with our two workflows setup, we're generally done but there are two improvements I want to implement

2
00:00:08,730 --> 00:00:09,550
here,

3
00:00:09,600 --> 00:00:15,630
one is our assets scripts folder, it grows and grows and whenever we build something new and files our

4
00:00:15,630 --> 00:00:20,380
names slightly different, the old files are kept around and the new files are added.

5
00:00:20,430 --> 00:00:22,620
Now this is not ideal,

6
00:00:22,620 --> 00:00:28,710
instead I would want to clear my scripts folder with every build and then just add the newly generated

7
00:00:28,710 --> 00:00:32,910
files there to get rid of the old files which I really don't need anymore

8
00:00:32,910 --> 00:00:34,810
and that's easy to do with webpack,

9
00:00:34,830 --> 00:00:38,360
we just have to tweak the configuration a little bit,

10
00:00:38,490 --> 00:00:43,530
we have to install a new package first of all with npm install --save-dev, you know that,

11
00:00:44,010 --> 00:00:51,950
and then it's clean-webpack-plugin. This installs a new package which we can implement in

12
00:00:51,950 --> 00:00:56,480
our webpack config, in our webpack workflow that cleans up the

13
00:00:56,480 --> 00:01:04,220
webpack output folder, so the path you're specifying here, in our case assets scripts. To use it in a webpack

14
00:01:04,250 --> 00:01:05,090
config file,

15
00:01:05,090 --> 00:01:14,160
I just have to import it, again with this const syntax, clean plugin could be a name you want to use

16
00:01:14,160 --> 00:01:24,440
there and require clean-webpack-plugin. Now clean plugin can be used in our webpack config file,

17
00:01:24,710 --> 00:01:32,780
we just have to add a new entry, a new config item there which is called plugins. Now plugins is a

18
00:01:32,780 --> 00:01:41,600
concept in webpack which allows you to apply various optimizations or transformations on the generated

19
00:01:41,900 --> 00:01:47,990
output so to say, so not on the individual files but on the generated output or in case of the clean

20
00:01:47,990 --> 00:01:53,030
plugin, on the output folder before the output is written to it.

21
00:01:53,300 --> 00:01:58,010
Plugins is an array because you can apply more than one plugin but here I only need one plugin and

22
00:01:58,010 --> 00:02:01,240
that's my clean plugin. For that here, for this plugin,

23
00:02:01,240 --> 00:02:08,410
we create new, then clean plugin.clean-webpack-plugin and execute this as a function,

24
00:02:08,420 --> 00:02:13,550
so we create a new object of that type so to say. In case you're wondering how I know this, from the official

25
00:02:13,550 --> 00:02:18,470
docs, you learned all of that in the official docs and the docs really are the place to learn that.

26
00:02:18,640 --> 00:02:24,560
Now of course I don't just want to add this here in the normal webpack config file but also in the prod file.

27
00:02:24,560 --> 00:02:28,020
So there let's also add a comma after dev tool and add plugins

28
00:02:28,160 --> 00:02:30,560
and of course also add the import here,

29
00:02:30,620 --> 00:02:39,420
so copy that from webpack config into webpack config prod. If we do that and we repeat npm run build

30
00:02:39,420 --> 00:02:46,330
prod, we'll see that our scripts folder now is a bit emptier because all the unused files were deleted

31
00:02:46,350 --> 00:02:48,490
which is indeed what I want.

32
00:02:48,600 --> 00:02:50,930
So that's one nice thing that's good to have,

33
00:02:51,030 --> 00:02:56,490
that's one useful improvement, another improvement is the naming of these files.

34
00:02:56,490 --> 00:03:03,090
I'm generally fine with these names but if you would deploy these files to a server, so if you take your

35
00:03:03,090 --> 00:03:08,640
web page or the HTML files and the scripts that belong to them and you move that onto a server and users

36
00:03:08,640 --> 00:03:15,810
start visiting your page, then browsers will typically cache Javascript and CSS files which means

37
00:03:16,260 --> 00:03:18,800
they store copies of these files

38
00:03:18,900 --> 00:03:26,000
and if the file hasn't changed, the next time the user visits a page, they will keep that stored, that

39
00:03:26,010 --> 00:03:27,720
cached file.

40
00:03:27,930 --> 00:03:33,930
Now that is an improvement which often makes sense and you can control it from a server side by setting the

41
00:03:33,930 --> 00:03:40,710
right headers on your resources which is a server admin task and not really directly related to Javascript

42
00:03:41,160 --> 00:03:46,860
but you can also force browsers to download a new version of a file by simply changing the file name

43
00:03:46,890 --> 00:03:51,900
because then it's a new file to the browser and it will therefore for download it and not use any cached

44
00:03:51,900 --> 00:03:57,510
version. Now for that, we want to generate these file names automatically and generate a new file name

45
00:03:57,720 --> 00:03:59,960
whenever we produce a new build

46
00:04:00,170 --> 00:04:03,320
and that's something where webpack also helps us.

47
00:04:03,510 --> 00:04:11,220
It makes it easy for us to add, not a random but a deterministic but unique element to every file name

48
00:04:11,400 --> 00:04:14,570
which changes with every build. For that

49
00:04:14,600 --> 00:04:21,300
all we have to do is go to our config and there, let's say to our production config because that really

50
00:04:21,300 --> 00:04:28,430
only matters for our production output and there in the output config, in the file name, we can add a

51
00:04:28,430 --> 00:04:36,410
dynamic element, we can add square brackets here like this and there, enter content hash and it has to

52
00:04:36,410 --> 00:04:42,290
be written like this because this is a keyword to webpack which tells webpack that a hash should be

53
00:04:42,290 --> 00:04:46,760
generated here, a hash that is different whenever a file changed,

54
00:04:46,880 --> 00:04:54,360
if a file didn't change, webpack will keep the existing hash. If we do that and we save this, you'll

55
00:04:54,360 --> 00:04:57,660
see what I mean when we rerun npm run build prod.

56
00:04:57,750 --> 00:05:02,300
If we have a look at our output in the scripts folder, you now see we have names like this.

57
00:05:02,370 --> 00:05:10,930
So this is now an output which will change every time we change the underlying files and we rebuild and

58
00:05:10,930 --> 00:05:15,910
therefore since since the file name now changes, browsers will redownload these files.

59
00:05:15,910 --> 00:05:23,020
Of course we now just need to make sure that in our index.html file, we update this import to

60
00:05:23,020 --> 00:05:26,670
meet our latest hash here, only for production

61
00:05:26,670 --> 00:05:31,870
however because if I go back to dev, then this will not be the case,

62
00:05:31,940 --> 00:05:38,570
there output files are actually not written to the scripts folder which is why it's now empty but instead

63
00:05:38,570 --> 00:05:39,860
store it in the memory

64
00:05:39,860 --> 00:05:44,770
but they also wouldn't be renamed because in the webpack config file which is used for development, I'm

65
00:05:44,780 --> 00:05:47,110
still using app.js as an entry file.

66
00:05:47,180 --> 00:05:53,180
So there if we test this during development with the webpack dev server at localhost:8080 here, it still

67
00:05:53,180 --> 00:05:58,910
works as before, if we build for production however, we get our output files in the scripts folder and

68
00:05:58,910 --> 00:06:05,720
then they will have these dynamic names, then we'll just have to adjust this name here in index.html

69
00:06:05,900 --> 00:06:11,150
and then we can take our code and upload it to some server to have the changed file names

70
00:06:11,150 --> 00:06:16,640
if our content change there and we therefore want to reflect this on our server and force browsers

71
00:06:16,640 --> 00:06:21,800
to take the latest version of our scripts. And that's the final optimization I wanted to implement here

72
00:06:22,070 --> 00:06:28,760
to make sure that we really produce output which is production ready and could now be pushed to a server,

73
00:06:28,940 --> 00:06:32,960
something we'll by the way also do in the deployment section of this course.