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:

Over this two-day webpack course you will learn how powerful webpack is, why you should use it to build your web applications, and how to leverage it as a key piece of your front-end or Node.js build architecture.

- Learn why webpack is a leading module bundler and how best to use it -


You will cover core concepts of webpack, such as how to organize and compose webpack's capabilities, write custom loaders and plug-ins, and how to use webpack to perform high-performance front-end techniques like code-splitting and long-term caching.

Sean Larkin, Technical Program Manager for Microsoft's Web Platform Team, will guide you through developing a deeper understanding of JavaScript modules and their relationship with high-performance web applications. With all of these acquired skills and knowledge you will have more confidence in your front-end architecture decisions.

Who you will be sitting next to

Many attendees for this course are JavaScript developers that are developing complex front-end applications. However, you will find those with JavaScript skills from other disciplines who are interested in adopting webpack.

How to apply these skills

With a thorough understanding of webpack and its use in front-end application construction, you have an extra tool on your belt which will provide you with new opportunities in the front-end architecture decisions you make and more opportunities for your company to benefit from having more sophisticated, robust and clean applications.

What next?


Book early to receive a discount on the course price and in doing so you will not only commit to growing your own skill set, but help us grow our community of over 140,000 passionate techies.

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

Over this two-day webpack course you will learn how powerful webpack is, why you should use it to build your web applications, and how to leverage it as a key piece of your front-end or Node.js build architecture.

- Learn why webpack is a leading module bundler and how best to use it -


You will cover core concepts of webpack, such as how to organize and compose webpack's capabilities, write custom loaders and plug-ins, and how to use webpack to perform high-performance front-end techniques like code-splitting and long-term caching.

Sean Larkin, Technical Program Manager for Microsoft's Web Platform Team, will guide you through developing a deeper understanding of JavaScript modules and their relationship with high-performance web applications. With all of these acquired skills and knowledge you will have more confidence in your front-end architecture decisions.

Who you will be sitting next to

Many attendees for this course are JavaScript developers that are developing complex front-end applications. However, you will find those with JavaScript skills from other disciplines who are interested in adopting webpack.

How to apply these skills

With a thorough understanding of webpack and its use in front-end application construction, you have an extra tool on your belt which will provide you with new opportunities in the front-end architecture decisions you make and more opportunities for your company to benefit from having more sophisticated, robust and clean applications.

What next?


Book early to receive a discount on the course price and in doing so you will not only commit to growing your own skill set, but help us grow our community of over 140,000 passionate techies.

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.