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.
FullStack Fringe Package
Interested in taking Webpack Academy on 9th - 10th July? Make it a week of learning by joining us for FullStack 2018, and get a special discount on your conference ticket!
Call or email our team for more information.
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
- 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
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
- 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
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.