Webpack; the how and the why

Kerry converted her company's build system and test suite from Require.js / Grunt to Webpack. This talk outlines some of the real benefits they gained, and struggles hit along the way

Transcript

1. WEBPACK WHO: | KERRY GALLAGHER @KERRY350 WHAT: FRONT-END ENGINEER AT SERVER DENSITY WHERE: SERVER DENSITY
2. WHAT IS WEBPACK? "Webpack is a module bundler. Webpack takes modules with dependencies and generates static assets representing those modules."
3. 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
4. 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
5. ENTRY > OUPUT entry: "./bootstrap.coffee", output: { path: __dirname + '/app/webpack', filename: "bundle.js" } Run with webpack --watch
6. 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
7. 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')
8. tag will be added per stylesheet that is loaded. WAIT...WHAT? By default a <style></style> 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")]
9. HOT MODULE REPLACEMENT
11. 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
12. 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) ]
13. 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
14. 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