Webpack – Your New BFF

Webpack is JavaScript module bundler that has taken the world by storm, but a lack of great docs and wealth of boilerplates have led to many people using it, but not understand it. I will show you how to utilize Webpack for building out your applications. Once you see the magic available, Webpack will become your new BFF!

Transcript

1. Webpack Your New BFF Jennifer Bland
2. About Me - 3 Truths & 1 Lie A. I graduated university before the IBM PC was introduced B. I have visited 82 countries C. I clerked for Sandra Day O’Conner D. My home is 400 sq G
3. 3 Topics We Will Cover What is Webpack Entry Installation Output Loaders Plugins
4. 4 What is Webpack? Manages every asset * JavaScript * Images * Fonts * CSS Leading module bundler for JavaScript applications
6. 6 Installing Webpack
7. 7 Running Webpack Can run from CLI or from an npm script
8. 8 Configuring Webpack Configuration is in a file called webpack.config.js This file is in the root directory of your application
9. Webpack Basic Concepts •Entry •Output •Loaders •Plugins
10. 10 Entry Point
11. 11 Output Point
12. Loaders •manage every asset by creaQng a module •applies transformaQon to module •places modified module into dependency graph
13. Loaders
14. Plugins •backbone of Webpack •can do everything a Loader can do and more
15. Plugins vs Loaders •Loaders can transform a single file •Loaders work on a file right before it is put into the dependency graph • Plugins can change mulQple files • Plugins can create bundles like css or javascript • Plugins can minify code
16. Plugins
17. About Me - 3 Truths & 1 Lie A. I graduated university before the IBM PC was introduced B. I have visited 82 countries C. I clerked for Sandra Day O’Conner D. My home is 400 sq G
18. www.in5days.tech Jennifer Bland
19. hUp://www.in5days.tech hUp://www.jenniferbland.com hUps://github.com/ratracegrad/ ratracegrad@gmail.com @ratracegrad