Webpack – Your New BFF

Slide 1

Slide 1 text

Webpack Your New BFF Jennifer Bland

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

6 Installing Webpack

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Webpack Basic Concepts •Entry •Output •Loaders •Plugins

Slide 10

Slide 10 text

10 Entry Point

Slide 11

Slide 11 text

11 Output Point

Slide 12

Slide 12 text

Loaders •manage every asset by creaQng a module •applies transformaQon to module •places modiﬁed module into dependency graph

Slide 13

Slide 13 text

Loaders

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Plugins

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

www.in5days.tech Jennifer Bland

Slide 19

Slide 19 text

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