Webpack Plugins System
Learning Paths:
Topics:
Table of Contents
Plugin System
Tapable Plugin System
Sean introduces Tapable, the plugin system architecture of Webpack and the variable hooks that you can use to extend webpack.
Compiler & Compilation
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.
Resolver & Module Factories
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.
Parser & Templates
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.
Compiler Walkthrough
Sean illustrates how Webpack utilizes the configuration file to build assets into a dependency graph.
Plugin System Code Walkthrough
Sean shows how instances interact with each other by walking through the Webpack source code.
Creating Plugins
Creating a Webpack Plugin
Sean demonstrates how to develop a custom plugin for Webpack.
Plugin Instance Hooks
Sean continues building a custom plugin to demonstrate the available hooks and features.
Isolating Plugins
Sean discusses how Webpack isolate your plugins so that you're passing the specific instance instead of the entire complier.
Config, Loaders & Babel
Creating a Custom Loader
Prompted by a student question, Sean demonstrates how to code a custom loader.
Configuring Babel for Webpack
Sean addresses students' questions about setting up Babel for modules and using Stage 0 Babel.
Webpack Dev Kit & Wrap Up
After reviewing the Webpack Developer Kit project that aids in writing custom plugins and loaders on the fly, Sean wraps up Mastering Webpack course.