Slide 1
Slide 1 text
WEBPACK
WHO: |
KERRY GALLAGHER @KERRY350
WHAT: FRONT-END ENGINEER AT SERVER DENSITY
WHERE: SERVER DENSITY
Slide 2
Slide 2 text
WHAT IS WEBPACK?
"Webpack is a module bundler. Webpack takes modules
with dependencies and generates static assets representing
those modules."
Slide 3
Slide 3 text
WHY?
Easy integration with npm and seamless handling of
multiple module formats (AMD, CommonJS etc)
Configuration files are easy to understand
Hot Module Replacement
Code Splitting
Loaders
Easy to make the leap from development to production
with the likes of plugins
Slide 4
Slide 4 text
EASY CONFIGURATION
var path = require('path')
var webpack = require('webpack')
module.exports = {
// The base directory for resolving the entry option
context: __dirname + "/app/coffeescript",
// The entry point for the bundle
entry: "./bootstrap.coffee",
// Various output options, to give us a single bundle.js file with everything
output: {
path: __dirname + '/app/webpack',
filename: "bundle.js",
publicPath: '/app/webpack/',
pathinfo: true
Some lines left out for brevity
Slide 5
Slide 5 text
ENTRY > OUPUT
entry: "./bootstrap.coffee",
output: {
path: __dirname + '/app/webpack',
filename: "bundle.js"
}
Run with webpack --watch
Slide 6
Slide 6 text
LOADERS
"Loaders allow you to preprocess files as you require() or
“load” them"
module: {
loaders: [
{ test: /\.csx.coffee$/, loaders: ['coffee', 'cjsx']},
{ test: /^(?=.*coffee)(?!.*csx).*/, loader: 'coffee' },
{ test: /\.html$/, loader: "mustache"},
{ test: /\.json$/, loader: "json"}
]
}
Loaders can be resolved from anywhere, node_modules is
conveniently used by default
They can be chained, making them very powerful
Slide 7
Slide 7 text
LOADERS ALLOW US
TO HANDLE ASSETS IN
NEW WAYS
Add in a style loader
{ test: /\.css$/, loader: 'style!css'}
And require() CSS
CSS = require('./site.css')
Slide 8
Slide 8 text
tag will be added per stylesheet that is loaded.
WAIT...WHAT?
By default a
Can be utilised in production by making use of the
ExtractTextPlugin
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader"
plugins: [new ExtractTextPlugin("app/assets/css/site.css")]
Slide 9
Slide 9 text
HOT MODULE
REPLACEMENT
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
HMR, HOW?
First of all output was updated. This makes use of
webpack-dev-server.
output: {
path: __dirname + '/app/webpack',
filename: "bundle.js",
publicPath: "http://localhost:8080/app/webpack"
}
And an extra loader to process CJSX files
{ test: /\.csx.coffee$/, loaders: ['react-hot', 'coffee', 'cjsx']}
Run with: webpack-dev-server --inline --hot
Slide 12
Slide 12 text
TIME TO GO LIVE!
Webpack includes numerous plugins to handle many of the
common production requirements
plugins: [
new webpack.optimize.UglifyJsPlugin({
mangle: {
except: ['$super', '$', 'exports']
},
output: {
comments: false
}
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(false)
]
Slide 13
Slide 13 text
STRUGGLES :(
Mustache templates closed like this:
{{ /
We were using Lodash like this:
_(somethingToWorkOn)
, but we weren't calling
.value()
in all cases
React.js components weren't rendering where a
lowercase letter had been used
Slide 14
Slide 14 text
CONCLUSION
Webpack has offered us a lot of productivity improvements,
and an improved workflow, with a much simpler approach
than the Grunt based system we were using