by Shreyansh Pandey (@weirdpanda) on Tuesday, 28 November 2017

+1
Vote on this proposal
Status: Submitted
Technical level
Beginner

Abstract

We all know how the JavaScript has changed over these couple of years; with new standards and developments coming out every day. Throughout this, rather volatile journey, we have seen some technologies which were ephemeral but there were (are) some which never changed or became the industry standard. Webpack, a module loader, is one of them. It has become the defacto standard for any frontend developer. However, being that awesome and extensible does mean that it’ll have some problems of its own; the major one: it’s a little scary for someone who has just begun his/her journey into the marvellous (yet irritating at time) land of frontend development. In this talk, I will demonstrate everything Webpack has to offer, right from scratch. From a very basic webpack configuration file to a multi-layer production-grade configuration. Along with that, I will also go into the rather cryptic depths of custom configuration. By the time we end with this, we’ll have a very clear idea as to what webpack is and you’ll be more than excited to try it out; confidently, this time.

Outline

  • Introduction
    • What is a module? S-o-C?
    • Why would I want to use a module loader over require?
    • Performance?
    • The current arsenal
  • Webpack
    • What is it? And why do I love it.
    • The working of webpack
    • A simple example
  • Let’s Code
    • A simple React application
    • Without webpack; the way to do things
    • Entrypoint, modules, plugins… introduction to the jargon
    • A simple Webpack config
    • Adding images and CSS
    • Adding automatic HTML parsing
    • Tools to make your dev workflow better
    • Code splitting
    • Optimisations for production
    • Refractoring to make your management easier
  • Recap
    • Modules
    • Plugins
    • Entrypoints
    • Chunks
    • Optimisations
    • Babel (ES*)
  • Q and A

Requirements

A laptop. A working internet connection. This talk is primarily for front-end developers, however, whoever wants to get their feet wet with some React or Angular 2.x, this can be a gentle introduction to an inevitable piece of tooling you’ll use.

Speaker bio

I am Shreyansh, a 19-year old backend (and sometimes frontend) developer from India currently living in Seattle, WA. I am a self-taught programmer, and owning to that, I have had the great fortune of working with startups of all sizes. While working with them, I have had to introduce myself to various concepts, most of which were really frustrating. With this talk, I aim to level down the complexity to a point where everyone understands and fully comprehends what I am talking about and, maybe, use it in their workflow.