Webpack 4 Fundamentals
Table of Contents
IntroductionSean Larkin introduces himself and the Webpack Fundamentals course.
Introducing WebpackSean 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.
Configuring WebpackSean illustrates the three ways to use Webpack: Webpack config, Webpack CLI, and Node API.
Webpack from Scratch
Using Webpack for the First TimeSean walks through setting up and running Webpack for the first time.
Adding npm Scripts for Environment BuildsSean demonstrates how to load and establish development environments such as development and production with Webpack.
Setting Up DebuggingSean illustrates how to set up debugging through Webpack and its integration with Chrome DevTools.
Adding Watch ModeSean demonstrates how to watch mode, which instructs Webpack to incremental compile as changes are made to the code.
ES Module SyntaxSean walks through the ESM syntax to export variables and import bindings within Webpack.
CommonJS ExportSince Webpack has interoperability between ESM and CommonJS syntax, Sean shows how to use CommonJS to import a module.
CommonJS Named ExportsSean shows how to use CommonJS named exports within Webpack.
Webpack Bundle WalkthroughSean examines step-by-step the Webpack runtime, which is the loading and resolving logic needed to connect modules as they interact.
Webpack Core Concepts
Webpack EntrySean starts to review the core concepts of Webpack by first examining Entry. Entry tells Webpack what files to load for the browser.
Output & LoadersContinuing 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.
Webpack PluginsSean discusses Webpack plugins, which are objects with an apply property that allows for hooking into the entire compilation lifecycle.
Webpack ConfigSean starts to build out a configuration for Webpack with features found in almost Webpack config file.
Passing Variable to Webpack ConfigSean demonstrates how to pass variables to Webpack config.
Adding Webpack PluginsSean shows how to add plugins to Webpack config.
Setting Up a Local Development ServerSean shows how to set up a local development server based on Express with Webpack that serves the contents of a distributed folder.
Starting to Code with WebpackStarting to build a simple web document upon the Webpack foundations, Sean shows how to import custom modules into other modules.
Webpack Q&ASean answers questions from students about using the Webpack HTML plugin against multiple templates, Webpack runs out of memory, and more.
Using CSS with WebpackSean shows how to incorporate CSS into a web application using Webpack.
Hot Module Replacement with CSSSean demonstrates how Webpack can patch changes incrementally and apply them to a web document without ever having to reload the browser.
File Loader & URL LoaderSean reviews common loaders such as the URL Loader, which moves or emits files into the output directory.
Limit Filesize Option in URL LoaderTo 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.
Implementing PresetsSean 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.
Bundle Analyzer PresetSean demonstrates the Webpack Bundle Analyzer, which is the Webpack plugin and CLI utility that represents bundle content as a convenient interactive zoomable treemap.
Compression PluginSean illustrates the WebPack Compression Plugin, which prepares compressed versions of assets to serve them with Content-Encoding.
Source MapsSean shows how to include source maps from Webpack to allow client-side code readable and debuggable.