webpack does what the browser would do
if given your app:
» find all images in your CSS and download them
» parse your JavaScript dependencies and download them
» parse all CSS for imports and download them
Slide 20
Slide 20 text
webpack can do this right at the beginning
And create a more optimised bundle, saving the browser (and
user) time
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
webpack is not just for JavaScript
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
webpack Terminology to tell your
friends
Slide 27
Slide 27 text
A module
Any file that your application uses. Not just JavaScript. CSS,
images, text files, anything.
Slide 28
Slide 28 text
Chunk
A file, or a group of files that webpack has squashed together
Slide 29
Slide 29 text
Entry point
A file webpack will search from to find dependencies and
modules
Slide 30
Slide 30 text
A loader
A function that takes a file's source and transforms it to return a
new source file
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
Let's do it
Slide 33
Slide 33 text
npm init -y
PSA: Don't install things globally!
Slide 34
Slide 34 text
npm install --save-dev webpack@2.1.0-beta.26
Run locally with ./node_modules/.bin/webpack
(Or add ./node_modules/.bin to your $PATH)
Configuring webpack
» Where should webpack start looking?
» Where should it output to?
Slide 38
Slide 38 text
webpack.config.js
var path = require('path')
module.exports = {
// where should it look?
entry: path.resolve('src', 'main.js'),
// where should it output to?
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
publicPath: '/dist/'
}
}
webpack rules
Apply transformations to certain files.
Slide 51
Slide 51 text
{
// apply this rule to any files that end in ".js"
test: /\.js$/,
// only look for files in the src directory
include: path.resolve('src'),
// configure the loaders for this rule
use: [{
}]
}
Slide 52
Slide 52 text
{
test: /\.js$/,
include: path.resolve('src'),
use: [{
// for files that this rule applies to
// run the babel-loader against them
loader: 'babel-loader',
// specific options for the babel loader
options: {
presets: ['es2015']
}
}]
}
const displayPerson = user =>
document.getElementById('results').innerHTML = `
${user.name}
${user.company}
${user.bio || 'No Bio :('}
`
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
Let's get some CSS in here
Remember, the goal of webpack is for it to manage all our assets,
CSS included.
This is weird at first but stick with me...
(Also I suck at design, please forgive)
ERROR in ./src/style.css
Module parse failed: /github-app/src/style.css Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
| form {
| width: 200px;
| margin: 10px auto;
@ ./src/main.js 3:0-22
@ multi main
Add another rule
{
test: /\.css$/,
include: path.resolve('src'),
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader',
}]
}
Loaders are applied from right to left, or bottom to top
var { getIfUtils, removeEmpty } = require('webpack-config-utils')
var {
ifProduction,
ifNotProduction
} = getIfUtils(process.env.NODE_ENV || 'development')
» removeEmpty: removes undefined from arrays
» ifProduction: returns what it's given if NODE_ENV ===
'production'
» ifNotProduction: returns what it's given if NODE_ENV !==
'production'
Slide 89
Slide 89 text
Starting point
npm run build:prod
- main.js: 24.9kb
(All CSS is contained within main.js and dynamically inserted)
Slide 90
Slide 90 text
Plugins
A webpack plugin will typically work on the bundle as a whole,
rather than on individual files.
Wait, the build went up?
This is a contrived example, because this app is tiny!
You pay a small cost because webpack has code that it inserts for
lazily loading modules, but if your pages are big enough you'll get
still save.
Slide 112
Slide 112 text
No content
Slide 113
Slide 113 text
No Lazy loading
bundle.app.193adde67586dd61304b.js 444 kB
Lazy loading: not a silver bullet
But when you do want it, webpack makes it easy :)
Slide 120
Slide 120 text
Bonus: dead code elimination
webpack 2 can parse ES2015 modules, that is:
import { x } from './y'
export default function foo() {...}
Slide 121
Slide 121 text
ES2015 module imports and exports have to be static.
So we can go through them and see which ones are used and
which ones aren't needed.
This means we can eliminate any code relating to ununsed
exports!
Slide 122
Slide 122 text
src/not-used.js
export const SO_NOT_USED = 'I AM NOT USED BY ANYTHING EVER'
export const SO_USED = 'I GET USED BY THINGS'
src/main.js
import { SO_USED } from './not-used'
console.log(SO_USED)
webpack 2 + ES2015 modules =
smaller builds, for free!
Slide 125
Slide 125 text
I've barely scratched the surface.
Slide 126
Slide 126 text
webpack 2
» Much improved documentation & community engagement
» Improved configuration with a nicer API and automatic
validation of config
» Tree shaking, easier code splitting and lazy loading
» More performant
Slide 127
Slide 127 text
Fin
» Slides & code: https://github.com/jackfranklin/half-stack-
webpack
» webpack 2: webpack.js.org
» Me: @Jack_Franklin, javascriptplayground.com,
elmplayground.com
Thanks to: Glen Maddern, Sean Larkinn, Kent C Dodds