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!
You Neeeeed Be Bundling
- Code ReUse
- Code Organization
- Code Writing Efficiency
- Code Usability
- Code ReUse
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 😲
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 🚨
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
