Microsoft
Webpack Plugins System
1 hour, 34 minutes
CC
Course Description
Dive into the Webpack 4 Plugin System and take a tour through the Webpack source code with Sean Larkin – core maintainer of Webpack 4. You'll get an overview of the tappable instances for building Webpack Plugins: Compiler, Compilation, Resolver, Module Factories, Parser & Templates. Then create a custom plugin, isolate plugin behavior and learn to create your own webpack plugins.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseLearn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Plugin System
Section Duration: 35 minutes
Sean introduces Tapable, the plugin system architecture of Webpack and the variable hooks that you can use to extend webpack.
Sean starts revealing the instances in Tapable beginning with the Compiler, which acts as a central dispatch within Webpack. The next instance review is Compilation, which is created by the Compiler and contains the dependency graph traversal algorithm.
The Resolver instance asynchronously locates a module by its absolute path. Module Factories take successfully resolved requests and collect the source from the file to store the information in a module object.
Sean examines the Parser instance. The Parser takes a string of source, creates an Abstract Syntax Tree (AST), and finds the import and require statements to generate a list of dependencies that get added to the module. Then reviews Template instance provides data binding for module objects.
Sean illustrates how Webpack utilizes the configuration file to build assets into a dependency graph.
Sean shows how instances interact with each other by walking through the Webpack source code.
Creating Plugins
Section Duration: 36 minutes
Sean demonstrates how to develop a custom plugin for Webpack.
Sean continues building a custom plugin to demonstrate the available hooks and features.
Sean discusses how Webpack isolate your plugins so that you're passing the specific instance instead of the entire complier.
Config, Loaders & Babel
Section Duration: 23 minutes
Prompted by a student question, Sean demonstrates how to code a custom loader.
Sean addresses students' questions about setting up Babel for modules and using Stage 0 Babel.
After reviewing the Webpack Developer Kit project that aids in writing custom plugins and loaders on the fly, Sean wraps up Mastering Webpack course.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops