Bundling your front-end with Webpack
•Download as PPTX, PDF•
3 likes•2,893 views
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.
Report
Share
![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](https://cdn.statically.io/img/www.slideshare.net/data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (16)
Similar to Bundling your front-end with Webpack
Similar to Bundling your front-end with Webpack (20)
Recently uploaded
Recently uploaded (20)
Bundling your front-end with Webpack
- 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)