Webpack – Meet and Greet – Damon Muma

View Github Repository Open presentation in a new window

thedamon

See all presentation from thedamon

Webpack – Meet and Greet – Damon Muma

0 0

webpack-lightning-talk-slides

Slide deck for my lightning talk on Webpack at the london front end meetup group

On Github thedamon / webpack-lightning-talk-slides

Webpack

Meet and Greet

Damon Muma

Senior Front-End Developer, Front-End Technology, Digital Services, London Life

@thedamon

Webpack

Intermediate Front-End Bundler, Open Source Web Utopia Sunshine Land

@????????

It bundles modules!

like require.js, browserify, etc

It bundles everything!

like grunt.js, gulp.js, etc

It's wonderful and scary. Let's get to know it!

Who uses a bundler: shout it out!

You Neeeeed Be Bundling

  • Code ReUse
  • Code Organization
  • Code Writing Efficiency
  • Code Usability
  • Code ReUse
Usability: where to write? where to find?. 5800 line js files.

OK! FINE! But why webpack?

  • Easy*
  • Doesn't matter if you're Common or ES6 or AMD or UMD
  • Bundles js. And css. And fonts? And images!?
  • Sourcemaps, linting, async loading, dev-server, etc, etc

But will we get along?

Who Understands Webpack?

Not me

Possibly not anybody

Maybe this guy?

  • Webpack can be easy. But it is definitely not simple.
  • It understands the problems our build processes need to solve.
  • Because it manages the whole process, things like sourcemaps are a breeze
  • API is... a bit weird 😲
It is understood within the dev community that you solve problems in webpack by finding someone doing what you want to do and copy pasting. Huzzah for google.

That said...

😍 It is absolutely frigging awesome 🎉

Show

Me

What

You

Got

The Basicest

$ webpack ./index.js bundle.js
  • entry
  • output
  • easy!: minification? just add 
     -p

Dependencies!

//index.js
import shelob from './legendaryspiders/shelob';
//shelob.js
require('../superweb');
//superweb.js
require('jquery');

webpack.config.js

  • project level configuration
  • bit like grunt or gulpfile
  • js, so... include libraries, logic checks, etc
  • docs are decent reading

Webpack dev server

  • http://localhost:8080/webpack-dev-server
  • watches files
  • stores bundle in RAM 🏎
  • hot updates: individual functions reload with changes 😎
  • reports syntax errors, issues, etc 🚨
the url is great, but iframes it, so you may just want localhost:8080

Bundling CSS

  • CSS in javascript? ... !
  • Control what is loaded when
  • Dead code elimination
{
test: /\.scss$/,
loader: 'style-loader' +
  '!css-loader' +
  '!autoprefixer-loader?browsers=last 2 version' +
  '!sass-loader?includePaths[]=' + __dirname + '/app/styles&sourceMap=true';
}

Bundling everything else

  • Fonts, images, iconfonts, html, etc
  • PreLoaders (image compression), Loaders (files, transpilers), PostLoaders: test coverage?
  • fileloader, urlloader (for data-uris)

Other Goodies

  • File Splitting based on entry points
  • Async Loading (critical CSS/JS!!!)
  • Automated Chunking
  • Probably a million other things

That's Webpack!

It's like a CMS for your front-end assets?

Resources

  • @jordangosselin
  • DevLdn.ca
  • reveal.js
  • YOU!

Look for slides at medium.com/bread-crumbs

Webpack Meet and Greet