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
   

   View Slide

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
   

   View Slide

3. 3
   Topics We Will Cover
   What is Webpack
   Entry
   Installation
   Output
   Loaders
   Plugins
   

   View Slide

4. 4
   What is Webpack?
   Manages every asset
   * JavaScript
   * Images
   * Fonts
   * CSS
   Leading module bundler for
   JavaScript applications
   

   View Slide

5. View Slide

6. 6
   Installing Webpack
   

   View Slide

7. 7
   Running Webpack
   Can run from CLI or from an npm script
   

   View Slide

8. 8
   Configuring Webpack
   Configuration is in a file called webpack.config.js
   This file is in the root directory of your application
   

   View Slide

9. Webpack Basic Concepts
   •Entry
   •Output
   •Loaders
   •Plugins
   

   View Slide

10. 10
    Entry Point
    

    View Slide

11. 11
    Output Point
    

    View Slide

12. Loaders
    •manage every asset by creaQng a module
    •applies transformaQon to module
    •places modified module into dependency graph
    

    View Slide

13. Loaders
    

    View Slide

14. Plugins
    •backbone of Webpack
    •can do everything a Loader can do and more
    

    View Slide

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
    

    View Slide

16. Plugins
    

    View Slide

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
    

    View Slide

18. www.in5days.tech
    Jennifer Bland
    

    View Slide

19. hUp://www.in5days.tech
    hUp://www.jenniferbland.com
    hUps://github.com/ratracegrad/
    ratracegrad@gmail.com
    @ratracegrad
    

    View Slide