D3rtv78w5mlsjkfdy6cc
2 DAY COURSE

Webpack Academy: From Beginner to Master with Sean Larkin

Topics covered at WEBPACK-01-02
View Schedule & Book More dates available

Next up:

Learn to use the open source bundler responsible for powering some of the most popular high-performance applications, and use it to make confident decisions about front-end architecture on your next project.

Over two days you will learn why webpack exists, why you should use it to build your web applications, and how to leverage webpack as a key piece of your front-end or Node.js-build architecture. You will cover the core concepts, understand how to organize and compose webpack's capabilities, and how to use webpack to perform high-performance front-end techniques like code-splitting and long-term caching, as well as writing custom loaders and plug-ins.

By the end of the course you will also walk away with an understanding of JavaScript modules and how they relate to high performance web apps, and with the confidence to understand and make key architectural decisions.

Learn how to:

  • Understand what webpack is and why you would want to use it
  • Master webpack's capabilities
  • Understand web performance fundamentals and how to leverage webpack to write performant web applications
  • Customize webpack to integrate with your existing workflow and architectures

About the Author

Sean Larkin

Sean Larkin is a Technical Program Manager for Microsoft's Web Platform Team, and author of webpack Academy. When he's not obsessing about building better Dev Tools for Microsoft Edge, he's maintaining webpack, and helping teach open-source organizations how to become more sustainable and grow their communities.

Day 1

A (Short) History of JavaScript, Module Systems, and Web Performance Practices

  • Before Modules?
    Scripts
    IIFE
  • The Advent of Node.js
  • Modules "Born"
    CommonJS
  • The Advent of Bundlers
  • Making CJS work in the browser, and more
    AMD/RequireJS
    ESM
  • The Advent of webpack
  • Learning from all the Predecessors
    webpack

From Beginner - Getting Started with webpack

  • Nothing but the command line
  • The Core Concepts
  • Starting Out Right
  • The Essentials
  • Putting it to Practice

Day 2

Building for the Web

  • Web Performance Techniques
    Background
    Minification
    Code splitting
    Code sharing
    Long term caching/hashing
    Performance scenarios
    Performance hints
    Application scenarios (and trade-offs)
  • Building for Node.js
    Node target
    Node mocks
  • Building for Electron
    Electron target
    Electron renderer target
    What these targets expose and why
  • Building for a Library
    Is webpack the bet tool for this?
    Why would I want to use something else?
    What can webpack do well?
    The output options and formats

Customizing Anything

  • Loaders
    Rule sets/Use conditions
    Parsers
    Any loader capabilities and why you use them
  • Plugins
    A look at all the Plugins webpack ships out of the box
    How to make your own custom Plugin
    Learning about the Plugin system
  • Resolution
    Aliases
    Module Folders
    Resolved Extensions
    Custom
  • Make Your Own Toolchain
    webpack NodeAPI
    Should you surface a configuration?
    Prior art

Triage and Debug

  • Build Size Bundle visualization tools Command line capabilities Module reasons
  • Build Time
    [v4] - Profiling Plugin
    Running Node trace profiles
    Build time checklist
  • Debugging webpack
    Build errors
    Functional errors
    Chrome DevTools and Node inspector

Audience

JavaScript developers building a complex front-end application with many static assets such as CSS images, fonts, etc. If you're interested in unveiling the mysteries of Webpack, then this course is for you!

Prerequisites

Delegates should be able to install NodeJS, Yarn/NPM onto their computer and have Basic JavaScript skills, and Web Development background.

Bring your own hardware

To take part in this workshop you are required to bring your own laptop (Mac or PC) so that you can learn using your preferred IDE.

Overview

Learn to use the open source bundler responsible for powering some of the most popular high-performance applications, and use it to make confident decisions about front-end architecture on your next project.

Over two days you will learn why webpack exists, why you should use it to build your web applications, and how to leverage webpack as a key piece of your front-end or Node.js-build architecture. You will cover the core concepts, understand how to organize and compose webpack's capabilities, and how to use webpack to perform high-performance front-end techniques like code-splitting and long-term caching, as well as writing custom loaders and plug-ins.

By the end of the course you will also walk away with an understanding of JavaScript modules and how they relate to high performance web apps, and with the confidence to understand and make key architectural decisions.

Learn how to:

  • Understand what webpack is and why you would want to use it
  • Master webpack's capabilities
  • Understand web performance fundamentals and how to leverage webpack to write performant web applications
  • Customize webpack to integrate with your existing workflow and architectures

About the Author

Sean Larkin

Sean Larkin is a Technical Program Manager for Microsoft's Web Platform Team, and author of webpack Academy. When he's not obsessing about building better Dev Tools for Microsoft Edge, he's maintaining webpack, and helping teach open-source organizations how to become more sustainable and grow their communities.

Program

Day 1

A (Short) History of JavaScript, Module Systems, and Web Performance Practices

  • Before Modules?
    Scripts
    IIFE
  • The Advent of Node.js
  • Modules "Born"
    CommonJS
  • The Advent of Bundlers
  • Making CJS work in the browser, and more
    AMD/RequireJS
    ESM
  • The Advent of webpack
  • Learning from all the Predecessors
    webpack

From Beginner - Getting Started with webpack

  • Nothing but the command line
  • The Core Concepts
  • Starting Out Right
  • The Essentials
  • Putting it to Practice

Day 2

Building for the Web

  • Web Performance Techniques
    Background
    Minification
    Code splitting
    Code sharing
    Long term caching/hashing
    Performance scenarios
    Performance hints
    Application scenarios (and trade-offs)
  • Building for Node.js
    Node target
    Node mocks
  • Building for Electron
    Electron target
    Electron renderer target
    What these targets expose and why
  • Building for a Library
    Is webpack the bet tool for this?
    Why would I want to use something else?
    What can webpack do well?
    The output options and formats

Customizing Anything

  • Loaders
    Rule sets/Use conditions
    Parsers
    Any loader capabilities and why you use them
  • Plugins
    A look at all the Plugins webpack ships out of the box
    How to make your own custom Plugin
    Learning about the Plugin system
  • Resolution
    Aliases
    Module Folders
    Resolved Extensions
    Custom
  • Make Your Own Toolchain
    webpack NodeAPI
    Should you surface a configuration?
    Prior art

Triage and Debug

  • Build Size Bundle visualization tools Command line capabilities Module reasons
  • Build Time
    [v4] - Profiling Plugin
    Running Node trace profiles
    Build time checklist
  • Debugging webpack
    Build errors
    Functional errors
    Chrome DevTools and Node inspector
Audience

Audience

JavaScript developers building a complex front-end application with many static assets such as CSS images, fonts, etc. If you're interested in unveiling the mysteries of Webpack, then this course is for you!

Prerequisites

Delegates should be able to install NodeJS, Yarn/NPM onto their computer and have Basic JavaScript skills, and Web Development background.

Bring your own hardware

To take part in this workshop you are required to bring your own laptop (Mac or PC) so that you can learn using your preferred IDE.