Coding

What is Webpack – academind.com Snippet

  • 00:00:00 what is web pack web pack helps us with
  • 00:00:04 one important problem we got if we build
  • 00:00:08 a website all these different fonts we
  • 00:00:10 get a lot of JavaScript files over which
  • 00:00:12 we distribute our code we get multiple
  • 00:00:14 CSS files probably multiple images and
  • 00:00:18 we can copy them manually to the server
  • 00:00:21 we're running the app one though for
  • 00:00:23 example for JavaScript we probably need
  • 00:00:26 to bundle them all into one file for
  • 00:00:28 shipping them because most browsers
  • 00:00:30 don't support multi fall JavaScript apps
  • 00:00:34 where we try to import from our files
  • 00:00:36 and that is where web pack comes into
  • 00:00:38 play
  • 00:00:39 it helps us bundle and optimize all
  • 00:00:42 these things so it helps us set up a
  • 00:00:45 development workflow but we have some
  • 00:00:47 input files which attend bundles
  • 00:00:49 together or transforms or does whatever
  • 00:00:52 we plug into our setup which is a core
  • 00:00:55 part of web pack so that we get some
  • 00:00:58 optimized and bundled files which we
  • 00:01:00 then deploy so that we got the best of
  • 00:01:03 both worlds a development setup where we
  • 00:01:05 can write we're both and understandable
  • 00:01:07 code and code that we ship that is as
  • 00:01:09 small as possible to make that work web
  • 00:01:13 pack follows the structure you see here
  • 00:01:15 we have certain entry points like the
  • 00:01:17 app dot J's file where it starts
  • 00:01:19 analyzing our project and if we then for
  • 00:01:22 example import another JavaScript file
  • 00:01:24 into that file it will automatically
  • 00:01:26 pick that up and add it to the bundle
  • 00:01:28 and thereafter we bundle everything
  • 00:01:32 optimize everything and get some output
  • 00:01:34 now in between these two steps we can
  • 00:01:38 plug in some loaders which do something
  • 00:01:40 to the files like for example transpile
  • 00:01:43 next-gen javascript to current gen
  • 00:01:46 javascript which runs in more browsers
  • 00:01:48 these are so-called module loaders they
  • 00:01:51 are applied on a per file level and
  • 00:01:54 additionally we get so-called flag ins
  • 00:01:57 which then take the entire bundle and do
  • 00:01:59 something with it
  • 00:02:00 like for example ugly fired so mini
  • 00:02:02 fired that is what web pages are helpful
  • 00:02:07 tool we use during the development to
  • 00:02:09 write code that's readable to us but
  • 00:02:12 usable by brow
  • 00:02:13 earth