Webpack Deep Dive

Kent C. Dodds

Utah

1 wife, 3 kids

PayPal, Inc.

@kentcdodds

kcd.im/webpack-workshop

Please Stand...

What this workshop is

Migrate existing JavaScript application to Webpack 2
Integrate unit testing with Mocha and Karma
Utilize features like tree-shaking, code splitting, hashing for long term caching, chunking, Service Worker, and more
Deploy the app to surge.sh

What this workshop is not

EVERY feature of Webpack and its ecosystem (not writing plugins/loaders)
ALL applicable to EVERY application

Requirements

to run the workshop

git
node (version 6)
npm (version 3)

Let's
Get
STARTED!

Setup

git clone https://github.com/kentcdodds/es6-todomvc.git

cd es6-todomvc

npm run setup:fem

npm start

open http://localhost:8080

open http://localhost:8080

Webpack 101

Why does this thing exist?

Webpack vs Grunt/Gulp?

no task runner needed

Dependencies

Loaders

Per-file processing

And hundreds more...

Plugins

Do everything else...

CommonsChunkPlugin

ExtractTextWebpackPlugin

DedupePlugin

PrefetchPlugin

And many more...

Is your setup script done yet?

Let's explore the app

Initializing Webpack

Required config properties

Config Props: entry/output.filename

entry

output

Exercise

Add scripts
Add webpack.config.js
Update index.html

FEM/00-original-project...FEM/01.0-add-webpack

git checkout -f FEM/01.0-add-webpack

Debugging Webpack

node-nightly --inspect 😀

* Now available by default in the latest versions of Node!

You don't need node-nightly anymore

Exercise

npm install -g node-nightly
Add scripts
Update webpack.config.js
Try it out!

FEM/01.0-add-webpack...FEM/01.1-debug-webpack

git checkout -f FEM/01.1-debug-webpack

Bundle everything

From scripts to CommonJS

Exercise

require everything in app.js
Remove IIFEs
Add pathinfo to webpack.config.js
Update index.html

FEM/01.1-debug-webpack...FEM/01.2-require-everything?w=1

git checkout -f FEM/01.2-require-everything

Explicit Dependencies

Architecture FTW

Exercise

Update helpers.js to export functions
Update app.js to require helpers and export onLoad
Update bootstrap.js to require helpers and app.js
Don't worry about everything else :)

FEM/01.2-require-everything...FEM/01.3-explicit-deps

git checkout -f FEM/01.3-explicit-deps

Transpile

The Babel Loader

Exercise

Add babel-loader to webpack.config
Create .babelrc
Remove 'use strict' from all files

FEM/01.3-explicit-deps...FEM/01.4-transpile

git checkout -f FEM/01.4-transpile

Load CSS

They're just modules...

CSS Loader

body:before {
  content: '😀';
  font-size: 60px;
}

Style Loader

<style>body:before{content:'😀';font-size:60px;}</style>

*at runtime

Exercise

Add style-loader and css-loader to webpack.config.js
require css files in app.js
Remove css files from index.html
Move bundle script to <head>

FEM/01.4-transpile...FEM/01.5-css

git checkout -f FEM/01.5-css

Hot Module Replacement

Live reload, but much better

bootstrap.js

webpackHotUpdate

Exercise

Update bootstrap.js to handle module.hot
Add --hot to dev script

FEM/01.5-css...FEM/01.6-hmr

git checkout -f FEM/01.6-hmr

Testing with Webpack

Using Karma and Mocha

Init - Exercise

Run node_modules/.bin/karma init
Update karma.conf.js
Update scripts
Add controller.test.js

FEM/01.6-hmr...FEM/02.0-init-karma

git checkout -f FEM/02.0-init-karma

Assert - Exercise

Add chai to frameworks in karma.conf.js
Update controller.test.js to use expect

FEM/02.0-init-karma...FEM/02.1-add-assertions

git checkout -f FEM/02.1-add-assertions

Webpack - Exercise

export default Controller
import Controller from './Controller'
Update karma.conf to use karma-webpack

FEM/02.1-add-assertions...FEM/02.2-add-webpack

git checkout -f FEM/02.2-add-webpack

Coverage - Exercise

Update .babelrc
Add karma-coverage config to karma.conf

FEM/02.2-add-webpack...FEM/02.3-add-coverage

git checkout -f FEM/02.3-add-coverage

Cover everything - Exercise

Update karma.conf:
- srcGlob
- add bootstrap.js to excluded files
- add check to coverageReporter

FEM/02.3-add-coverage...FEM/02.4-cover-everything

git checkout -f FEM/02.4-cover-everything

ES6ify ✨

Static Modules & more!

Exercise

export default View from view.js
import View from './view' in app.js
etc...

FEM/02.4-cover-everything...FEM/03.0-es6ify

git checkout -f FEM/03.0-es6ify

Tree Shaking 🌲

Save bytes

Tree shaking creates dead code.

-Tobias Koppers

Tree shaking excludes exports from modules where it can be detected the export is not used. Uglify then deletes the dead code.

-me 😉

Exercise

Update .babelrc
Remove `log` from app.js
Observe the tree shaking glory 🌳 🌴
Remove `log` and `padLeft` from helpers.js

FEM/03.0-es6ify...FEM/04.0-tree-shaking

git checkout -f FEM/05.0-code-splitting

Code Splitting

Load it when you need it

Exercise

Update graph/index.js:
- Remove `renderGraph` import
- Add function to use System.import

FEM/05.0-code-splitting...FEM/05.1-code-splitting

git checkout -f FEM/05.1-code-splitting

Commons Chunking

App 3

App 4

App 2

App 1

Exercise

Update entry to object
Update filename
Move index.html to src directory
Remove bundle.js script in index.html
Remove publicPath
Add CommonsChunk Plugin
Add HtmlWebpackPlugin
Update start script

FEM/05.1-code-splitting...FEM/06.0-commons-chunk

git checkout -f FEM/06.0-commons-chunk

Exercise

Add webpack manifest to index.html template
Add manifest to CommonsChunkPlugin

FEM/06.0-commons-chunk...FEM/06.1-longterm-caching

git checkout -f FEM/06.1-longterm-caching

Exercise

Replace css loader with ExtractTextPlugin.extract
Add ExtractTextPlugin to plugins

FEM/06.1-longterm-caching...FEM/06.2-extract-css

git checkout -f FEM/06.2-extract-css

Offline

Progressive Web Apps

Exercise

Add Offline plugin to webpack.config.js
import offline runtime in app.js
Add Define plugin to webpack.config.js

FEM/06.2-extract-css...FEM/07.0-offline

git checkout -f FEM/07.0-offline

Deploy

Surge.sh: CDN that's crazy fast

Exercise

Run node_modules/.bin/surge token
Add scripts/deploy
Update .gitignore
Update package.json

FEM/07.0-offline...FEM/07.1-deploy-surge

git checkout -f FEM/07.1-deploy-surge

export SURGE_LOGIN=<your-email>
export SURGE_TOKEN=<your-token>
node_modules/.bin/surge --project dist --domain https://todomvc-<your-name>.surge.sh

SET SURGE_LOGIN=<your-email>
SET SURGE_TOKEN=<your-token>
node_modules/.bin/surge --project dist --domain https://todomvc-<your-name>.surge.sh

*nix

windows

Resources

awesome-webpack 🕶 git.io/awesome-webpack
Webpack Documentation:
- Current: webpack.github.io
- Next: github.com/webpack/webpack.io
All my egghead.io lessons: kcd.im/egghead-webpack
React Hot Loader: kcd.im/react-hot-loader
Webpack Plugins: kcd.im/webpack-plugins
Webpack Loaders: kcd.im/webpack-loaders
SurviveJS Book: kcd.im/survivejs-webpack

Thank you!

@kentcdodds

kcd.im/webpack-workshop
kcd.im/webpack-workshop-feedback

Webpack Deep Dive

By Kent C. Dodds

Webpack Deep Dive

We’ll start out making sure that everyone’s on the same page with what webpack’s role in application development is and some of the core concepts like loaders and plugins. Then we’ll look at the application we’ll be testing our knowledge on and start it off with a basic webpack configuration. Then we’ll set up unit testing with Karma and webpack as this is one of the most important things to get right early on. We’ll go through the whole process including setting up code coverage. After lunch, we’ll dive into some of features that come with webpack which can be used to improve the performance of our applications. We’ll cover code splitting, fine tune our browser caching setup, and wrap up with the CommonsChunkPlugin to optimize how we share common code between different parts of the application.

16,719

Webpack Deep Dive

Please Stand...

What this workshop is

What this workshop is not

Requirements

to run the workshop

Let's Get STARTED!

Setup

open http://localhost:8080

Webpack 101

Why does this thing exist?

Webpack vs Grunt/Gulp?

no task runner needed

Dependencies

Loaders

Per-file processing

Plugins

Do everything else...

Is your setup script done yet?

Let's explore the app

Initializing Webpack

Required config properties

Config Props: entry/output.filename

Exercise

Debugging Webpack

node-nightly --inspect 😀

Exercise

Bundle everything

From scripts to CommonJS

Exercise

Explicit Dependencies

Architecture FTW

Exercise

Transpile

The Babel Loader

Exercise

Load CSS

They're just modules...

Exercise

Hot Module Replacement

Live reload, but much better

Exercise

Testing with Webpack

Using Karma and Mocha

Init - Exercise

Assert - Exercise

Webpack - Exercise

Coverage - Exercise

Cover everything - Exercise

ES6ify ✨

Static Modules & more!

Exercise

Tree Shaking 🌲

Save bytes

Exercise

Code Splitting

Load it when you need it

Exercise

Commons Chunking

Exercise

Exercise

Exercise

Offline

Progressive Web Apps

Exercise

Deploy

Surge.sh: CDN that's crazy fast

Exercise

Resources

Thank you!

Webpack Deep Dive

More from Kent C. Dodds

Let's
Get
STARTED!