0345 4506120

Webpack Academy: From Beginner to Master

Interested in learning to use the open source bundler responsible for powering some of the most popular high-performance applications? Then this course is for you!

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 learn 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 front-end architecture decisions that are right for your next project.

About the Author

Sean Larkin

Sean Larkin

Sean Larkin is a Technical Program Manager for Microsoft's Web Platform Team. 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.


Learning Objectives

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 integration with your existing workflow and architectures

Course Content

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

Privacy Notice

In order to provide you with the service requested we will need to retain and use your contact information in accordance with our Privacy Notice. If you choose to provide us with this information you explicitly consent to us using the information as necessary to provide the request service to you. If you do not agree please do not proceed to request the service from us.

Marketing Permissions

Would you like to receive our newsletter and other information on products and services which we think will be of interest to you by email. We will always treat your information with care and in accordance with our Privacy Notice. You are free to withdraw this permission at any time.


Our Customers Include