1
00:00:02,190 --> 00:00:06,680
So we want to set up our own build workflow and we'll use webpack for it,

2
00:00:06,780 --> 00:00:10,800
let's first analyze what the requirements of our workflow are.

3
00:00:10,830 --> 00:00:16,650
We certainly want to support next generation javascript features so we need to be able to compile that

4
00:00:16,890 --> 00:00:22,620
next generation javascript code to current gen javascript code which runs in all major browsers these

5
00:00:22,620 --> 00:00:23,850
days.

6
00:00:23,850 --> 00:00:32,610
Additionally we want to be able to handle jsx so that we can use jsx in our script files, in our react

7
00:00:32,790 --> 00:00:34,300
project.

8
00:00:34,320 --> 00:00:43,560
We also want to add css auto-prefixing so that we can write simple css rules and get automatic prefixing

9
00:00:43,800 --> 00:00:49,760
so that it supports the best syntax in all browsers our applications supports.

10
00:00:49,910 --> 00:00:55,780
And we also want to support images of course, we should be able to import images as we did it in our

11
00:00:55,790 --> 00:01:00,660
create react app and then use it to our template.

12
00:01:00,670 --> 00:01:07,300
Finally we want to optimize the code, before we built that bundler or we spit it out,

13
00:01:07,300 --> 00:01:13,690
it should be optimized to shrink our javascript code to as small of a size as possible.

14
00:01:13,690 --> 00:01:15,160
These are the requirements,

15
00:01:15,160 --> 00:01:20,940
that's basically what creates react gives us though that also gives us more like linting and so on

16
00:01:21,190 --> 00:01:23,800
but these are the core requirements I also want to build

17
00:01:23,800 --> 00:01:25,620
in this custom workflow.

18
00:01:25,660 --> 00:01:30,820
So let's dive into that and let's see which dependencies we need to install and how we actually manage

19
00:01:30,820 --> 00:01:33,850
these and how we then configure webpack.