FOSSMeet 2018

FOSSMeet 2018

FOSSMeet is an annual event at NIT Calicut that brings together the Free and Open Source Community from around the country.

Shreyansh Pandey

@weirdpanda

The Definitive Guide to Webpack

Submitted Nov 29, 2017

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.

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

FOSSMeet is an annual event on Free and Open Source Software, conducted at National Institute of Technology, Calicut. The funnel is a space for proposals and voting on events. more