This document discusses how bundling front-end code with Webpack can help solve issues with large JavaScript files in single-page apps. It introduces Webpack as a module bundler that can handle dependencies across JavaScript, CSS, images and more. It supports loading modules on demand and pre-processing file types. The document provides a demo GitHub repo and references to learn more about Webpack's features and how companies like Instagram use it.

1. Bundling your front-end
with
Danillo Corvalan

2. About me
• Danillo Corvalan
• Full Stack Developer
– Nodejs, mongodb, mysql, docker
– Backbone, React
• TDC floripa 2014, sampa 2014
• Learning ReactJS (Packt pub)[In progress]
– Sergio Siqueira

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)

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.)

8. Demo
https://github.com/DanilloCorvalan/webpack-app-sample
Each numbered commit represents a webpack feature included in the
demonstration app.

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)