ReactFoo Mumbai

Webpack is the de facto standard in todays world of frontend development. Popular projects like React, Vue, Angular use it all. But how did we get here? How can you not be scared of it and actually start configuring it for your own projects?

I am going to take you through the past of JS bundling, how webpack came into picture. Show you how you can build your own configuration files and make the webpack nightmare go away.

Outline

• How did it all start?

Bundling in JavaScript started with the aim to avoid the 6-connections-per-origin limit and the bottlenecks of HTTP/1.1. Concatenation was the primary way of bundling for a long long time.

• The problems with concatenating

• The need to reuse nodejs packages in browser.

• How browserify came into the picture

• Efforts browserify put into making things work.

• Introduction of Webpack in 2015

• How webpack broke the rules & why

• The backlash webpack gets about its configuration complexity

• Live Demo - handcoding a webpack configuration file

• entry
• output
• rules & loaders
• plugins

• What to do next?

• What’s new in webpack 4.

• Resources to learn more.

Speaker bio

Geek...ish! I love CSS and make CSS art at CodePen. VueJS fan!

Links

• https://codepen.io/praveenpuglia
• https://twitter.com/praveenpuglia
• https://praveenpuglia.com
• https://github.com/praveenpuglia
• https://www.youtube.com/praveenpuglia

Slides

https://speakerdeck.com/praveenpuglia/a-re-introduction-to-webpack-draft