Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webpack – Your New BFF

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!

Jennifer Bland

February 01, 2018
Tweet

More Decks by Jennifer Bland

Other Decks in Programming

Transcript

  1. Webpack
    Your New BFF
    Jennifer Bland

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  5. 6
    Installing Webpack

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. 10
    Entry Point

    View full-size slide

  10. 11
    Output Point

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. 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 full-size slide

  14. 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 full-size slide

  15. www.in5days.tech
    Jennifer Bland

    View full-size slide

  16. hUp://www.in5days.tech
    hUp://www.jenniferbland.com
    hUps://github.com/ratracegrad/
    [email protected]
    @ratracegrad

    View full-size slide