ReactFoo Mumbai

On React, alternatives to React, ReactNative and front-end engineering

A re-introduction to webpack

Submitted by Praveen Puglia on Wednesday, 28 March 2018

videocam
Preview video

Technical level

Beginner

Status

Confirmed & Scheduled

View proposal in schedule

Vote on this proposal

Login to vote

Total votes:  +4

Abstract

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

Slides

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

Preview video

https://www.youtube.com/watch?v=1pLZs1eCrtg&feature=youtu.be

Comments

Login with Twitter or Google to leave a comment