Using Webpack At Scale

Webpack can be tricky, especialy as your project grows. I go over we're taking advantage of Webpack to build 9now.com.au - universal/hybrid single-page-app, and how we managed it's pains.

Basic sample configs, for the first CODE slide are on Github at https://github.com/joshhunt/webpack-simple-configs

Transcript

1. W E B PA C K I S A M A Z I N G * @ J O S H H U N T
2. Webpack is a modern build tool for web apps
3. *Can be a bit of a pain to manage.
4. Not just a JS bundler. Wants to have complete understanding of your web app.
5. Not a task runner. Doesn't replace Gulp.
6. First class support for transforming dependencies
7. Plugin-orientated architecture
8. D E M O
9. M O R E W E B PA C K
10. url-loader: Copy static assets to build directory and reference via uri
14. svg-react-loader: Load SVG files as React components
16. Faster source maps
17. Fix relative import hell with resolve.root
19. DefinePlugin lets you define text replacements within all files
26. M A N A G I N G A S S E T S
28. Webpack abstracts away the URI of the resource
29. Automatically hash assets for long and auto-busting cache
30. Long Cache + Cache Busting 101 1. Append ID to each file e.g. logo-v1.png 2. Set Expires header on files to 1 year 3. *browsers will now cache assets forever* 4. When files change, change the ID e.g. logo-v2.png 5. ‘Invalidates’ logo browser cache, browsers download new one
31. Webpack can do all this automatically
35. Use a plugin to create an asset manifest file that the server reads to get the URL
37. We wrote our own: gist.github.com/joshhunt Another is webpack-manifest-plugin on npm.
38. [hash] is fast because it represents the entire build. Use during development. [chunkhash] is a hash of individual assets, so it’s slow. Use for production.
39. W E B PA C K O N T H E S E RV E R
40. React runs great on the server. require(logo.png) doesnt.
42. Some solutions are convoluted and hacky - Babel plugins and require hooks
43. Just Webpack your server.
45. It’s weird and feels kinda wrong. But it’s relatively simple and straightforward.
46. T E S T I N G W E B PA C K I F I E D C O D E
47. It’s quicker and easier to test React components on the server with Node
49. You can't require images in Node.
50. Build tests with Webpack!
51. NO! ITS SOOOOOOO SLOW!
52. Quick feedback cycle is crucial for healthy testing practices
53. Simulate resolve.root with app-module-path
55. Stub require(.png) on Node with node-hook
57. Mock require(.styl) on Node with proxyquire
59. M A N A G I N G M U LT I P L E C O N F I G S W I T H O U T S TA B B I N G Y O U R E Y E S O U T ( M O S T LY )
60. As your project ‘matures’, Webpack configs get bigger
61. Dev + Prod gives you two variants
62. With server + client, you now have four Dev + Prod gives you two variants
63. Having four seperate, slightly varying 100+ line configs is madness
64. Solution? Webpack config generator!
66. C O D E
67. It’s not the prettiest code, but IMHO it’s probably the best solution to a shitty problem
68. F I N .
69. F I N . Q U E S T I O N S ?