Hi! I'm Julien 🤓

Twitter: @JulienMelissas

Technical Director at Craftpeak

I like...

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

Dina

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

Build Processes

(a necessary evil)

Simple Web Projects

📄

📄

HTML

CSS

JS

🗼

IMG

Modern Web Projects

📄

📄

📄

📄

📄

📄

CSS

📄

📄

📄

📄

📄

📄

JS

📄

HTML

🗼

IMG

🗼

IMG

📄

Vendor

Grunt

("sage" build file)

Gulp

(sage build file)

Webpack

(sage build file)

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?
  • SVG Sprites
  • .env Loader​
  • Imagemin

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:

• http://blog.andrewray.me/webpack-when-to-use-and-why/ (April 2016)
• https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9 (April 2016)
• https://medium.com/@dtothefp/why-can-t-anyone-write-a-simple-webpack-tutorial-d0b075db35ed (May 2015)
• https://www.youtube.com/watch?v=_QEM9kdV-b0 (2017)

Cool webpack configs

• React Boilerplate
• Laravel Mix
• Roots Sage 😉