Modern, Flexible Frontend Workflows with webpack

Julien Melissas

Β 

Syntax Conference 2017

Hi! I'm JulienΒ πŸ€“

Twitter: @JulienMelissas

Technical Director atΒ Craftpeak

I like...

  • Dogs
  • Motorcycling
  • Travel
  • Music
  • Cooking
  • Other Stuff

Dina

Wilbur

Most days I do...

  • Websites for craft breweries
  • WordPress Development: on the roots.io team and build custom themes/websites/web applications all day
  • JS Development: Experience with React, Ember, Angular
  • UX/UI Consultation

I'm not an expert.

Build Processes

(a necessary evil)

Simple Web Projects

πŸ“„

πŸ“„

πŸ“„

HTML

CSS

JS

πŸ—Ό

IMG

Modern Web Projects

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

CSS

Β 

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

JS

Β 

πŸ“„

HTML

πŸ—Ό

IMG

πŸ—Ό

IMG

πŸ“„

Vendor

Grunt

Gulp

Webpack

How Does Webpack Work?

Dependency Graphs

What is this anyways?

Webpack Core Concepts

  1. Entry: where to start grabbing top-level code to add to the bundle(s)?
  2. Output: where will the bundled codeΒ need to go once it has been processed?
  3. Loaders: transforms dependencies (entries) into JS so that webpack can understand & bundleΒ them
  4. Plugins: transforms bundlesΒ of code/assets/outputs before they are finally output

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

CSS

Β 

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

JS

Β 

πŸ“„

HTML

πŸ—Ό

IMG

πŸ—Ό

IMG

πŸ“„

Vendor

Entry Points

Where does your code come from?

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

CSS

Β 

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

Β 

πŸ“„

JS

Β 

πŸ“„

HTML

πŸ—Ό

IMG

πŸ—Ό

IMG

πŸ“„

Vendor

Outputs

Where does your code go?

Loaders

  • Webpack only understands JavaScript
  • Loaders transform files into modules
  • Loaders are defined by testΒ and use

Plugins

  • Usually used for bundles or "chunks" of code, not single files
  • Literally can do "anything" before the final bundle
  • Accept options, usually on object syntax: { }
  • new PluginName
  • Plugin examples?

Example

Go Crazy

(webpack can do a lot)

Hot Module Replacement (HMR)

Instead of reloading the page, Webpack can INJECT new JS (and other) changes right into the page.

Code Splitting

Allows you to split up your code based on when/what you need.

Β 

Try code splitting based on routes

Tree Shaking

Tree Shaking == Dead Code Elimination

Β 

Make sure you're only importing what you need, if you're using modern JS libraries as dependencies, Webpack is already only including the code you need πŸ‘

Good webpack Resources:

Cool webpack configs

Thanks!

Any Questions?

Modern, Flexible Front End Workflows with Webpack

By Julien Melissas

Modern, Flexible Front End Workflows with Webpack

  • 3,035