Microsoft
Webpack 4 Fundamentals
4 hours, 10 minutes
CC
Course Description
Learn the core concepts of Webpack 4 with Sean Larkin – maintainer of Webpack. You'll start entirely from scratch by adding webpack with npm and separate your dev and production environments. Then you'll learn to lazy load your JavaScript through code splitting, remove code you don't need through tree shaking, and control your entire build pipeline with popular loaders and plugins from the Webpack ecosystem. Be confident in building and shipping your code with Webpack – the open source bundler responsible for powering some of the most popular and high-performance web applications!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseWhat They're Saying
Spending my Saturday learning about Webpack from Sean Larkin's awesome course on Frontend Masters
Abhishek Sharma
absharmatweets
Learn 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
Why Webpack
Section Duration: 41 minutes
Sean Larkin introduces himself and the Webpack Fundamentals course.
By reviewing the limitations of JavaScript for web applications, Sean explains the problems that Webpack solves
Sean reviews the progression of JavaScript web development around the sharing modules, which are highly self-contained with distinct functionality that can be rearranged, removed, or added as necessary without disrupting the entire codebase.
Sean discusses EcmaScript Modules (ESM), a standard pattern for importing JavaScript modules.
Sean introduces and discusses the history of Webpack, which is a modular bundler that allows developers to write in any module format and compiles them into the browser.
Sean illustrates the three ways to use Webpack: Webpack config, Webpack CLI, and Node API.
Webpack from Scratch
Section Duration: 59 minutes
Sean walks through setting up and running Webpack for the first time.
Sean demonstrates how to load and establish development environments such as development and production with Webpack.
Sean illustrates how to set up debugging through Webpack and its integration with Chrome DevTools.
Sean shows how to code a simple JavaScript module, export it and import it with Webpack using ESM module syntax.
Sean demonstrates how to watch mode, which instructs Webpack to incremental compile as changes are made to the code.
Sean walks through the ESM syntax to export variables and import bindings within Webpack.
Since Webpack has interoperability between ESM and CommonJS syntax, Sean shows how to use CommonJS to import a module.
Sean shows how to use CommonJS named exports within Webpack.
Sean illustrates that when bundling code into production Webpack uses tree shaking, a term commonly used in the JavaScript context for dead-code elimination.
Sean examines step-by-step the Webpack runtime, which is the loading and resolving logic needed to connect modules as they interact.
Webpack Core Concepts
Section Duration: 59 minutes
Sean starts to review the core concepts of Webpack by first examining Entry. Entry tells Webpack what files to load for the browser.
Continuing to review Webpack concepts, Sean examines Output and Loaders. Output works in tandem with Entry telling Webpack where and how to distribute bundles or compilations. Loaders instruct Webpack on how to modify files before its added to the dependency graph.
Chaining Loaders are transformations applied in a pipeline to the resource. Each loader passes values onto the next loader until the end loader, where Webpack expects JavaScript to be returned. Sean takes questions from students.
Sean discusses Webpack plugins, which are objects with an apply property that allows for hooking into the entire compilation lifecycle.
Sean starts to build out a configuration for Webpack with features found in almost Webpack config file.
Sean demonstrates how to pass variables to Webpack config.
Sean shows how to add plugins to Webpack config.
Sean shows how to set up a local development server based on Express with Webpack that serves the contents of a distributed folder.
Starting to build a simple web document upon the Webpack foundations, Sean shows how to import custom modules into other modules.
Sean demonstrates how to load extra JavaScript module merge into a base Webpack configuration.
Sean answers questions from students about using the Webpack HTML plugin against multiple templates, Webpack runs out of memory, and more.
Using Plugins
Section Duration: 1 hour, 16 minutes
Sean shows how to incorporate CSS into a web application using Webpack.
Sean demonstrates how Webpack can patch changes incrementally and apply them to a web document without ever having to reload the browser.
Sean reviews common loaders such as the URL Loader, which moves or emits files into the output directory.
Sean loads an image through JavaScript by taking an image, copying the image, and storing the image the within JavaScript by through base64 encoding.
To reduce page weight of web pages, Sean demonstrates how to set limits on what filesizes of images that should be converted to base64 encoding with the URL Loader.
Sean shows to create presets for one or a few special coding scenarios such as testing a feature or analyzing a build when not wanting to endanger the production Webpack configuration.
Sean demonstrates the Webpack Bundle Analyzer, which is the Webpack plugin and CLI utility that represents bundle content as a convenient interactive zoomable treemap.
Sean illustrates the WebPack Compression Plugin, which prepares compressed versions of assets to serve them with Content-Encoding.
Sean shows how to include source maps from Webpack to allow client-side code readable and debuggable.
Wrapping Up
Section Duration: 12 minutes
After taking questions from students about caching, lazy-loading with code splitting, and web performance, Sean wraps up Webpack Fundamentals course.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops