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!

Da526e4b5901b3a2759cf234285c6488?s=128

Jennifer Bland

February 01, 2018
Tweet

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
  5. None
  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