3. The problem
• Big web Apps
• Misunderstanding Single Page Apps
– Giant javascript bundled files (No async load)
– Images and Styles
– Many Http Requests
• Page rendering time
• Exporting small modules or the whole App
– Micro services
4. What we’ve got
• Current tools such as requirejs, gulp, grunt,
and so on
– Generates giant scripts files
– Doesn’t understand images and styles
– Understand Flat files rather than modules and
Dependency Graph
– No on-demand load (Async)
5. The Solution - Webpack
• Module bundler that emits static assets
representing your modules
• What are modules?
– .js, .jade, .jsx, .hbs, .coffee, .css, .less, .sass
– .png (Yes! Images are dependencies as well)
6.
7. That’s definitely the solution!
• Allows CommonJS/AMD
• Allow multiple entry points and on-demand
load
• Support loaders to pre-process files i.e jade,
coffee, css, less, JSX, etc.
• Support plugins
• Common Plugin for shared code between
modules (jQuery, lodash, util libs, custom libs,
etc.)
9. References
• http://webpack.github.io/ (Official site)
• https://github.com/webpack/webpack (Repo)
• https://github.com/petehunt/webpack-howto
(community getting started repo)
• https://www.youtube.com/watch?v=VkTCL6N
qm6Y&feature=youtu.be (YouTube video
about Instagram and why Webpack fit their
needs)